10

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

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

这怎么可能？

谢谢！

4

5 回答 5

9

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

我希望这有帮助。

于 2013-08-19T20:21:46.967 回答
8

我写了一个插件，允许在两个轴上移动一个可拖动的。它完成了工作，但作为一个jQuery UI 小部件而不是一个简单的 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; 
    } 
  }); 
};
于 2009-10-19T12:41:37.467 回答
4

使用拖动事件对您有利

$('.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)，您必须进行检查才能将项目留在原处，但如果有人在 |x| 上停留的像素超过几个像素，那将是非常令人印象深刻的。 =|y| 线。

您没有指定轴是否始终保持在它们最初开始的位置，或者它们是否根据可拖动项目在拖动开始时的位置而改变（例如，如果您将其移动一点，然后放开，并尝试再拖动它一些） . 还有一个 start: 和 end: 事件也可以帮助你完成这部分。

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

于 2009-10-17T01:30:07.170 回答
2

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

请证明我错了？

于 2009-10-18T16:36:15.167 回答
1

我没有给你确切的代码，但我可以通过帮助你更深入地思考这个问题来为你指明正确的方向。

所以用户开始拖动一个不受约束的对象。当对象从起点移动一个像素时，如果第一个像素位于这四个 ( 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”。

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

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

于 2009-10-15T16:23:43.927 回答