JQuery UI draggable:一边是超出限制

Question

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

我想要实现的是元素可以超过底部阈值并移动到父级的底部边界之外.然而,调整大小/拖动仍应限制在父母的边界规定的顶部,右侧和左侧.

所以这个修改是我提出的:

// 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);
    }
}

检查JS小提琴

您必须根据您的应用程序修改代码我刚才给您的想法