Question

我水平拖动一个大于浏览器的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/

非常感谢任何帮助。

Answer 1

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

例如 drop

wrapX+wrapWidth < draggableX + draggableW这是wrapEndX < draggableEndX并且您越过了右边缘，因此将其恢复到它开始的位置，或者其他工作将在最后设置动画 - 可能的最大值。

它与左边缘相似。

你需要编写自己的逻辑，但无论如何它似乎都是

Answer 2

通过控制拖动事件，可以防止拖动器移出边距：查看我的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;
        };
    }
});

jquery snap可拖动到包装器

2 个答案: