Question

我想知道是否有办法让jQuery可拖动，只能向上，向下和向左，向右拖动。我想阻止用户沿对角线拖动div。在我的情况下，无法使用可拖动UI中的网格选项。

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

这怎么可能？

谢谢！

Answer 1

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

您可以使用轴选项限制a上的拖动移动特定的轴。例如：
```
$('.draggable_horiz').draggable({axis: "x"});
```
更多信息：http://api.jqueryui.com/draggable/#option-axis

您可以使用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

我希望这会有所帮助。

Answer 2

我写了一个允许在两个轴上移动拖动的插件。它完成了工作，但它更好地实现为jQuery UI widget而不是简单的jQuery插件。

托管演示：http://jsbin.com/ugadu/1（可通过http://jsbin.com/ugadu/1/edit进行编辑）

插件代码：

$.fn.draggableXY = function(options) { 
  var defaultOptions = { 
    distance: 5, 
    dynamic: false 
  }; 
  options = $.extend(defaultOptions, options); 

  this.draggable({ 
    distance: options.distance, 
    start: function (event, ui) { 
      ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0}); 
      ui.helper.data('draggableXY.newDrag', true); 
    }, 
    drag: function (event, ui) { 
      var originalPosition = ui.helper.data('draggableXY.originalPosition'); 
      var deltaX = Math.abs(originalPosition.left - ui.position.left); 
      var deltaY = Math.abs(originalPosition.top - ui.position.top); 

      var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag'); 
      ui.helper.data('draggableXY.newDrag', false); 

      var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax'); 
      ui.helper.data('draggableXY.xMax', xMax); 

      var newPosition = ui.position; 
      if(xMax) { 
        newPosition.top = originalPosition.top; 
      } 
      if(!xMax){ 
        newPosition.left = originalPosition.left; 
      } 

      return newPosition; 
    } 
  }); 
};

Answer 3

使用拖动事件

$('.selector').draggable({
   drag: function(event, ui) { ... }
});

我不是100％肯定如何，但在这里，你可以检查坐标。正如~jack-laplante所说，这是你要比较的地方。如果坐标比y更接近x轴，则将轴更改为x

//setter
$('.selector').draggable('option', 'axis', 'x');

如果反过来将其改为y。这将使您获得一个捕捉动作，以始终在x轴或y轴（从起点）获得该项目。如果轴是（x + n，y + n），你必须做一个检查才能将项目留在任何地方，但如果有人留下了超过几个像素，那么这将是非常令人印象深刻的。 = | Y |线。

您没有指定轴是否始终保持最初开始的位置，或者它们是否根据可拖动项目在拖动开始时的位置而变化（就像您稍微移动它一样，然后放开，并尝试拖动它多一点）。这是一个开始：结束：事件也可以帮助你完成这一部分。

你究竟想要拖动什么不能对角线，但可以向左，向右，向上和向下拖动？

Answer 4

我发布了这个答案，经过多次讨论，说只是 jqueryui调用该对象是不可能的。您似乎在拖动时不允许更改约束轴。

请证明我错了？

Answer 5

我没有适合你的代码，但我可以通过帮助你更深入地思考问题来指出正确的方向。

因此用户开始拖动无约束的对象。当对象从起始点移动一个像素时，如果第一个像素位于这四个（ x ， y ）坐标中的任何一个，其中 x 和 y 是起点：（ x -1， y -1），（ x - 1， y +1），（ x +1， y -1）或（ x -1， y +1），仍然不清楚用户意味着走哪条路。例如，如果对象位于一个向下和向左，则无法判断约束是否应该在x上或y轴。

一旦移动多个像素，就会变得更容易。但是你还是要在像素坐标上进行一些舍入，就像在上面的坐标中一样，abs（ xoffset ）== abs（ yoffset ），然后你就可以了当x和/或y距离大于某个任意小整数时，应用约束的事件，例如“3”。

要处理的下一个问题是，您希望允许用户更改轴的轴约束的最后一次触发的距离。我猜你想要一个网格效果，所以你必须在删除约束之前设置一个像素移动的阈值，并寻找用户想要拖动的下一个“方向”。

如果你弄清楚如何去做，这是一个有趣的挑战和良好的学习经历。

如何使用固定的X和Y轴使jQuery可拖动？

5 个答案: