jquery - 如何使 jQuery 可拖动并固定 X 轴和 Y 轴？

Question

我想知道是否有一种方法可以使 jQuery 可拖动，只能直接向上、向下、向左、向右拖动。我想阻止用户对角拖动 div。在我的情况下，无法在可拖动 UI 中使用网格选项。

http://jqueryui.com/demos/draggable/#constrain-movement

这怎么可能？

谢谢!

Answer 1

jQueryUI 支持两种方法来控制固定轨道上的拖动。

1. 您可以使用轴选项来限制在特定轴。例如:

   $('.draggable_horiz').draggable({axis: "x"});
   

   更多信息请点击:http://api.jqueryui.com/draggable/#option-axis

2. 您可以使用元素或 x/y 数组来约束移动 定义边界框的坐标。

       $('.draggable_track').draggable({ containment: [0,0, 250, 24] });
   
   or to just use the parent element as a reference track:
   
       $('.draggable_track').draggable({ containment: 'parent' });
   

   更多信息请点击这里: http://api.jqueryui.com/draggable/#option-containment

我希望这会有所帮助。