Question

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

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

// 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

因为容器边界已由JQuery UI设置并且在释放鼠标之前不会更新，所以expandParent函数无法正常工作。

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

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

但现在我有一个棘手的解决方案，使用一个虚拟父元素并将其高度设置为一个大的值，如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

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

Answer 2

在JQuery UI中，它们在拖动开始时保留父项的信息，因此即使您更改大小，它仍然会限制拖动。

要解决此问题，您可以设置自己的收容边界框。

$("#dragElement")
    .draggable({
        cursor      : "move",
        scroll      : false,
        containment : [20, 20, 400+20, 1000],
        drag : function(event, ui) {
            expandParent("#parentElement", "#dragElement");
        }
    })
    .resizable({
        containment : "parent",
        resize : 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", dragElBottom+20);
    }
}

使用上面的代码，它将允许父级的大小调整到1000 + 20的高度。您可以尝试上面的代码here (JSFiddle)。

如果需要在开始时（以及在resize方法中）执行动态容器，请使用正确的BoundingBox设置新容器。

var p = $("#parentElement");
var dragWidth = parseInt($("#dragElement").css('width'));
var left = p[0].offsetLeft;
var top = p[0].offsetTop;
var width = parseInt(p.css("width"), 10)-dragWidth;
var containment = [left, top, width+left, 1000];

是的，我知道解决方案有点hackish ..但无论如何，我刚刚更新了JSFiddle这个解决方案可能无法动态计算和重新设置容器的大小。只是想让JSFiddle很好地工作。

Answer 3

    $("#dragElement")
        .draggable({
            cursor      : "move",
            containment : '#Container',
            drag : function(event, ui) {
                var growAmount = 10;
                var cont = $('#Container');
                var item = $(ui.helper);

                var itemOffset = item.offset();
                itemOffset.bottom = itemOffset.top + dProps.item.height();


                var contOffset= cont.offset();
                contOffset.bottom = contOffset.top + cont.height();

                if(itemOffset.bottom >= contOffset.bottom){
                    var inst = item.draggable("instance");
                    inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount];
                    cont.height(parseInt(cont.height()) + growAmount);
                }
            }
        });

Answer 4

好吧，这是可能的，但并非没有shinanigans ...

基本上是jQuery的可拖动对象接受的包含数组参数，只会约束到提供的值。通常，数组与到[x1，y1，x2，y2]，所以如果我们只提供前3个，并保留第四个未定义，那么底部将不受限制。

但是，这意味着我们需要手动提供左侧，顶部和正确的价值观。顶部和左侧很容易，但是必须计算右侧：

var scrollbarWidth = 22;
var container = $('#my-container');
var cOffset = container.offset();
var cRight = cOffset.left + c.outerWidth() - $('#my-draggable').outerWidth() - scrollbarWidth; 

$('#my-draggable').draggable({
  containment: [ cOffset.left, cOffset.top, cRight ],
  scroll: true
});

首先，这会很好用，但是... 容器移动时，可拖动元素将必须具有其containment属性更新。此外，如果调整窗口大小，这也可能是一个问题。那说，我有一个功能全面的示例here。

JQuery UI draggable：一边是超出限制

4 个答案: