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

Question

我正在使用 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 个像素后停止。然后您必须释放鼠标按钮并再次调整大小/拖动以进一步扩展该区域。你知道这是为什么吗？

Answer 1

那么 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

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