Javascript JQuery UI可拖动：超出一侧的限制

我正在使用jQueryUI实现可调整大小/可拖动的元素。现在，我想为这些元素定义一个限制在三个（！）面上调整/拖动大小的容器。看看这个。您可以看到，所包含的元素只能在父级区域内调整大小/拖动

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

这就是我的想法：

//可调整大小/可拖动选项
调整大小/拖动：函数（事件、ui）{
expandParent（“#parentElement”，“#dragElement”）；
}
函数expandParent（parentName，childName）{
var dragEl=$（childName）；
var dragElTop=parseInt（dragEl.css（“top”），10）；
var dragElHeight=parseInt（dragEl.css（“高度”），10）；
var dragElBottom=dragElTop+dragElHeight；
var parentEl=$（parentName）；
var parentElBottom=parseInt（parentEl.css（“高度”）；
如果（parentElBottom看起来像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);
    }
}

是的，我知道这个解决方案有点粗糙。但是无论如何，我只是更新了这个解决方案，它可能不是为了动态地计算和重新设置容器的大小。我只是想让JSFIDLE能够很好地工作。
好的，expandParent函数不起作用，因为容器边界已经由JQuery UI设置，它不会被upda直到你放开鼠标

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

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

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


把我拖来拖去

函数expandParent（parentName，childName）{
var dragEl=$（childName）；
var parentEl=$（parentName）；
var dragElHeight=dragEl.height（）；
如果（parentEl.height（）正常，那么这是可能的，但不是没有花招

基本上是jQuery的draggable接受的包容数组参数，
将仅约束到提供的值。通常，数组与
到[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
});

这将很好地开始工作，但…这是踢球者，每次
容器移动时，可拖动元素必须具有其包含属性
更新。此外，如果调整窗口大小，这也可能是一个问题
我有一个功能完整的示例。
在没有测试代码或任何东西的情况下，我注意到下面一行：
if（parentElBottom是的，您可以将元素移动到移动开始时作为父区域一部分的尽可能低的位置。因此，该区域的扩展不知何故没有转发到JQuery UI的模型。好吧，这是一种我还没有想到的方法。但它仅限于绝对值，不是吗？我想e以使容器相对于父对象。手动将边界框的位置调整到父对象的位置似乎非常不方便且冗长。我添加了代码以计算容器的边界框。我刚刚更新了解决方案，使其能够正确且动态地工作。我只想有一个那里的解决方案。那很好！但我比较喜欢codedme的解决方案，因为它简单-虽然它不能完全满足需求，但它涵盖了大多数用例。这个棘手的解决方案似乎很聪明！所以没有办法操纵JQuery UI使用的值？我猜它们是在某个容器中设置的，所以可能是一个这仍然是这个特定用例的最佳解决方案吗？我正在研究做同样的事情，并希望确保最近在这方面没有任何改进。
    $("#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);
                }
            }
        });

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