jquery snap 可拖动到包装器答案

【问题标题】：jquery snap draggable to wrapperjquery snap 可拖动到包装器
【发布时间】：2013-02-09 01:18:51
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

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

【讨论】：

谢谢，这对我的目的非常有用。我对 //event.preventDefault(); 行只有一个问题。 //event.stopPropagation();因为我想了解代码 - 这代表什么？再次感谢。
@peer，好吧，首先我尝试了preventDefault和stopPropagation，但最后我发现拖动函数返回false足以防止拖动。所以我注释掉了这些行。希望能澄清你的问题。
感谢您的回答。我想左右还原容器。我试图改变“return false;”使用动画，但它没有做我想要的 - 将拖动区域捕捉到容器左右。有什么想法吗？
问题是当我把 $(this).stop().animate({ left: 0 });而不是返回false；在该行中，它将 div 恢复到中心而不是容器边缘。

【解决方案2】：

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

例如 drop

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

与左边缘类似。

您需要编写自己的逻辑，但无论如何似乎都是这样

【讨论】：

问题是当我把 $(this).stop().animate({ left: 0 });而不是返回false；在上面的代码中，它将 div 恢复到中心而不是容器边缘。
不知道你在做什么它对我很好jsfiddle.net/xBVYT/329
您的示例显示了问题 - 如果我使用 stop:function() 拖动总是返回到 CENTER。与 revert: true 相同。我希望可拖动的结尾返回到屏幕边缘。应该可以在不恢复到 CENTER 的情况下查看可拖动对象，但是当可拖动对象的左/右端到达 .wrap (width:100%;) 的末尾时，它应该返回到它。我在这里尝试了上面的代码：jsfiddle.net/xBVYT/332 问题是 1. 可拖动返回到 CENTER 和 2. 在我释放鼠标之前触发了还原。
它在中心，因为你的容器#drag div 居中。看到那些left:50% 你已经把它居中，现在抱怨它不在左边！？！为什么我更了解您的代码，或者您根本不知道自己在做什么？您可以在我上一篇文章中的示例中看到如何在拖动完成后实现动画，以便在正确的时间触发。
这是一个如何将其返回到边缘的想法。 jsfiddle.net/xBVYT/337
jsfiddle.net/xBVYT/337/embedded/result