JQuery UI draggable：一边是超出限制 [英] JQuery UI draggable: Exceed containment on one side

问题描述

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

I am using JQuery UI to implement resizable/draggable elements. Now I would like to define a containment for these elements that limits the resizing/dragging on exactly three(!) sides. E.g. have a look at this JSFiddle example. You can see that the contained element can only be resized/dragged inside the parent's area.

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

What I would like to achieve is that the element can exceed the bottom threshold and be moved to beyond the bottom border of the parent. Nevertheless the resizing/dragging should still be limited at the top, right and left sides as is prescribed by the parent's according borders.

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

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

If you play around with the bottom border you notice that the parent's area is expanded if the child gets too close to the bottom border of the parent. Unfortunately this stops after 20 pixels. You then have to release the mouse button and resize/drag again to extend the area further. Do you have any idea why that is?

推荐答案

那个expandParent函数不能正常工作，因为容器边界已设置为JQuery UI，直到你发布鼠标才会更新。

Well that expandParent function is not going to work because container boundaries has been set by JQuery UI and it wont be updated until you release the mouse .

所以我想到两个解决方案，一个是优雅的，另一个是棘手的

So i can think of two solution here one is elegant and the other is tricky

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

Obviously the elegant solution would be writing your own containing method which is free at bottom .

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

But now i have a tricky solution by using a dummy parent element and set its height to a large value like 1000 or height of window and then set overflow hidden attribute for real parent.

这是我的解决方案：

<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小提琴

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

You have to modify the code based on your application i just gave you the idea

这篇关于JQuery UI draggable：一边是超出限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！