2

我水平拖动一个大于浏览器的 div，但希望它在到达左右末端时捕捉到包装器。我不能用“包含”来做到这一点，因为当拖动的 div 大于其包含时，拖动无法正常工作：

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x", containment: "document" });

http://jsfiddle.net/xBVYT/320/

出于这个原因，我删除了“包含”，但随后拖动的 div 离开了浏览器窗口：

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x" });

http://jsfiddle.net/xBVYT/325/

任何帮助都感激不尽。

4

2 回答 2

0

您在 API 中的相似之处是revert- http://api.jqueryui.com/draggable/#option-revert或者您可以以类似的方式使用 jQuery.animate()

例如在下降

wrapX+wrapWidth < draggableX + draggableW也就是说wrapEndX < draggableEndX，您已经越过了右边缘，因此将其恢复到开始的位置，否则其他工作将在最后对其进行动画处理 - 可能的最大值。

它与左边缘类似。

您需要编写自己的逻辑，但无论如何似乎如此

于 2013-02-09T02:34:59.433 回答
0

通过控制拖动事件，可以防止可拖动对象移出边距：参见我的jsfiddle 下面是具有拖动事件功能的选项：

$( "#dragable" ).draggable({
    cursor: "e-resize"
    , axis: "x" 
    , drag: function(event, ui) {
        var $container = $(this).closest(".wrap");
        var container_left = $container.position().left;
        var container_right = $container.position().left + $container.width();
        var drag_left = ui.offset.left;
        var drag_right = ui.offset.left + $(this).width();
        if (drag_left > container_left) {
            return false;
        };
        if (drag_right < container_right) {
            return false;
        };
    }
});
于 2013-02-09T13:40:29.847 回答