我正在使用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);
}
}
您必须根据您的应用程序修改代码我刚才给您的想法
看起来在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很好地工作。
$("#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);
}
}
});
好的，所以这是可能的，但不是没有恶作剧......
基本上jQuery的draggable接受的包含数组参数只会限制提供的值。通常，数组与[x1，y1，x2，y2]相关，因此如果我们只提供前3个，并且保留第4个未定义，那么底部将不受约束。
但是，这意味着我们需要手动提供left，top和right值。顶部和左侧很容易，但必须计算右：
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
});
这将很好地开始，但是......这里是踢球者，每次容器移动时，可拖动元素都必须更新它的包含属性。此外，如果调整窗口大小，这也可能是一个问题。也就是说，我确实有一个功能齐全的例子here。