2

我在另一个 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，然后无缝地拖动？

谢谢。

4

1 回答 1

3

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

在下面的代码中，

  • 标准draggable containment选项被省略
  • resizeContainerdraggable 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
    });
});

见小提琴演示

于 2012-05-05T01:28:36.847 回答