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

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

1 个答案: