javascript - JQuery UI 可拖动 : Exceed containment on one side

标签 javascript jquery-ui-draggable jquery-ui-resizable containment

我正在使用 JQuery UI 来实现可调整大小/可拖动的元素。现在我想为这些元素定义一个容器,以限制在三个(!)边上的调整大小/拖动。例如。看看这个JSFiddle example .您可以看到包含的元素只能在父区域内调整大小/拖动。

我想实现的是元素可以超出底部阈值并移动到父元素的底部边框之外。尽管如此,调整大小/拖动仍应限制在顶部、右侧和左侧,如父级相应边框所规定的那样。

所以 this modification是我想出的:

// resizable/draggable option
resize/drag : function(event, ui) {
    expandParent("#parentElement", "#dragElement");
}

function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var dragElTop = parseInt(dragEl.css("top"), 10);
    var dragElHeight = parseInt(dragEl.css("height"), 10);
    var dragElBottom = dragElTop + dragElHeight;
    var parentEl = $(parentName);
    var parentElBottom = parseInt(parentEl.css("height"));
    if(parentElBottom <= dragElBottom + 20) {
        parentEl.css("height", "+=2");
    }
}

如果您尝试使用底部边框,您会注意到如果子级太靠近父级的底部边框,父级的区域就会扩大。不幸的是,这在 20 个像素后停止。然后您必须释放鼠标按钮并再次调整大小/拖动以进一步扩展该区域。你知道这是为什么吗?

最佳答案

那么 expandParent 函数将不起作用,因为容器边界已由 JQuery UI 设置,并且在您释放鼠标之前不会更新。

所以我可以想到两种解决方案,一种是优雅的,另一种是棘手的

显然,优雅的解决方案是编写您自己的底部免费的包含方法。

但现在我有一个棘手的解决方案,使用虚拟父元素并将其高度设置为较大的值,如 1000 或窗口高度,然后为真正的父元素设置溢出隐藏属性。

这是我的解决方案:

<div id="parentElement">
    <div id="dummy-parent">
        <div id="dragElement" class="dragClass">
            <p>Drag me around!</p>
        </div>
    </div>
</div>



function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var parentEl = $(parentName);
    var dragElHeight=dragEl.height();
    if(parentEl.height() <= dragElHeight) {
        parentEl.height(dragElHeight);
    }
}

Check the JS Fiddle

你必须根据你的应用程序修改代码我只是给你的想法

关于javascript - JQuery UI 可拖动 : Exceed containment on one side,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17629864/

相关文章:

PHP Smarty 包含在 js 函数中

jquery - 如果 div 已经被放置,则禁用放置?

javascript - 运行 React js 示例 Web 应用程序时出现控制台错误

javascript - Gridstack动态创建的小部件不被拖动

javascript - 删除元素后更改列表中正在删除的元素的颜色

jquery-ui - JQuery UI 可拖动,不能拖出 twitter Bootstrap 选项卡

javascript - jQuery-UI 可调整大小 : scale all alsoResize elements in proportion with resizable div

html - 如何使用 jQuery UI 设置自定义调整大小句柄?

JQuery-ui : tabs with heightstyle fill, 在可调整大小的面板中,选项卡内容高度未更新

javascript - Discord.js permissionOverwrites 不起作用但完全没有错误