jquery snap draggable to wrapper

我水平拖动一个大于浏览器的div，但希望在到达左右端时捕捉到包装。我不能与“遏制”做得一样拖动时，无法正常工作时，拖格低于其遏制较大：jquery snap draggable to wrapper

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

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

出于这个原因，我删除了“遏制”但随后的拖格是走出去的浏览器窗口：

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

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

任何帮助将非常感激。

来源

2013-02-09 peer

通过控制拖动事件，可以防止拖动移出边距：见我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-09 13:40:29 marty

谢谢你，这对我的目的很好。我只有一个问题就行 //event.preventDefault（）; //event.stopPropagation（）; 因为我想了解代码 - 这代表什么？再次感谢。 – peer 2013-02-09 21:40:19

@peer，好吧，首先我尝试了preventDefault和stopPropagation，但最终我发现从drag函数返回false足以防止拖动。所以我评论了这些线。希望澄清你的问题。 – marty 2013-02-09 22:32:37

谢谢你的回答。我想回复左侧和右侧的容器。我试图改变“返回假”;与动画，但它不是我想要的 - 将拖动的区域捕捉到容器的左侧和右侧。有任何想法吗？ – peer 2013-02-27 14:42:57

你有API类似什么是revert - http://api.jqueryui.com/draggable/#option-revert或者您也可以以类似的方式使用jQuery的.animate()

上。例如下降

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

它与左边相似。

你需要编写自己的逻辑，但它似乎很反正

来源

2013-02-09 02:34:59 kidwon

问题是，当我把$（this）.stop（）。animate（{left：0}）;而不是返回false;在上面的代码中，它将div恢复到中心而不是容器边缘。 – peer 2013-02-28 10:27:32

不知道你在做什么，它可以与我工作正常http://jsfiddle.net/xBVYT/329/ – kidwon 2013-02-28 13:44:06

你的例子显示的问题 - 如果我使用stop：function（）可拖动总是返回到中心。这与回复：true一样。我想拖动的结尾返回到屏幕的边缘。应该可以在不返回到CENTER的情况下查看可拖动对象，但是当可拖动对象的左/右端到达.wrap（宽度：100％;）时，它应该返回到它。我已经在上面的代码尝试在这里：http://jsfiddle.net/xBVYT/332/问题是1.可拖动返回到CENTER和2.释放鼠标之前触发恢复。 – peer 2013-03-01 09:08:30

jquery snap draggable to wrapper

回答

相关问题