拖动时调整 JQuery Draggable 元素的包含父级的大小

Question

我在另一个 div 'box' 父容器中有一个 div 'slide' 元素，并已将 JQuery Draggable 应用于子容器。在拖动项目时，我正在调整父容器的大小，有时会缩小，有时会放大。

问题是 JQuery 不响应这种调整大小，并且仍然在父级的原始尺寸内包含拖动的元素，而不是在其当前尺寸内，直到 mouseup - 下一个拖动会话将使用新尺寸（直到它再次改变）。

为了尝试解决这个问题，我希望触发 mouseup 事件，然后触发 mousedown 事件，以便 JQuery 使用新的容器大小：

$('.slide').draggable({ axis: "x", containment: 'parent',
                    drag: function (e, ui) {
                        resizeContainer();

                        if (outsideContainer()){

                        // Try to stop and restart dragging
                            $(this).trigger('mouseup');
                            $(this).trigger('mousedown');
                        }
                    }

但是，这会引发异常...

Unable to get value of the property '0': object is null or undefined

...在这行 JQuery 代码上：

this.helper[0].style.left=this.position.left+"px";

任何人都知道我可以如何 a) 让 Draggable 实时响应父维度的变化或 b) 触发 dragstop 然后无缝地拖动？

谢谢。

Answer 1

@Fijjit，如果我理解正确，你想要的是一个自定义的“包含”函数，它在将边界应用于拖动的元素之前实现你的 resizeContainer 算法。

在下面的代码中，

• 标准的draggable containment选项被省略了
• resizeContainer 附加为 draggable drag 事件处理程序
• resizeContainer 两用； (a) 它执行您的调整大小算法，并且 (b) 应用自定义包含算法

javascript：

$(function(){
    var $container = $("#myContainer");

    function resizeContainer(e, ui) {
        //implement container resize algorithm here
        var w1 = ui.helper.outerWidth(),
            w2 = $container.width();
        ui.position.left = Math.max(Math.min(ui.position.left, w2 - w1), 0);
    }

    $("#draggable").draggable({
        axis: "x",
        drag: resizeContainer
    });
});

见fiddle demo