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

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

这怎么可能

---

谢谢

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

因此，用户开始拖动一个不受约束的对象。当对象从起点移动一个像素时，如果第一个像素位于这四个（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”时，你可以触发一个事件来应用约束

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

---

这是一个有趣的挑战，如果你知道如何做，这是一个很好的学习体验。

利用拖动事件为你带来好处

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

我不是100%确定怎么做，但是在这里，你可以检查一下坐标。正如杰克·拉普兰特所说，这是你可以比较的地方。如果坐标比y轴更靠近x轴，请将轴更改为x轴

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

如果换个方向，则将其更改为y。这将使捕捉运动始终使项目位于x轴或y轴（从起点开始）。如果轴是（x+n，y+n），则必须进行检查以将项目保留在任何位置，但如果有人在| x |＝| y |线上保留了多个像素，这将非常令人印象深刻

您没有指定轴是否始终保持最初开始的位置，或者它们是否根据可拖动项目在“拖动开始”上的位置而改变（例如，如果您移动它一点，然后松开，并尝试再拖动一些）。有一个开始：和结束：事件也可以帮助你的一部分

---

你到底想拖动什么东西，它不能对角移动，但可以向左、向右、向上和向下移动？

我在发布这个答案之前做了很多修改，说仅仅对对象调用jqueryui是不可能的。当您已经拖动时，它似乎不允许您更改约束轴

---

请证明我错了？

我写了一个插件，可以在两个轴上移动拖拽装置。它完成了任务，但是作为一个jQuery插件而不是一个简单的jQuery插件来实现会更好

托管演示：（可通过编辑）

插件代码：

$.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; 
    } 
  }); 
}; 

---

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

可以使用“轴”选项来限制在轴上的拖动移动 特定轴。例如：

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

更多信息请点击此处：

可以使用元素或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' });

更多信息请点击此处：

---

我希望这能有所帮助。

如果你能左右、上下拖动一个物体。。。你不能斜拉它吗？或者你只是从“起始位置”开始谈论？也就是说，如果你从0,0开始，移动到超过0，-3的点。。。突然间，您被限制为仅垂直？是的，这正是我想要实现的。我编写了正确的代码，JQuery不允许您在拖动轴时更改轴。感谢您的输入！我正在创建一个图像库，用户将在其中拖动图像以移动到下一张图片。如果用户向上或向下拖动图像，将显示一个小的信息文本。啊！抱歉，这里有一条调试线，除非你打开了Firebug，否则它会断开。我已经修复并更改了答案中的链接。我在下面的线程中修改了您的代码版本，以支持轻松拖动。这是你几年前在那里写的一段很棒的代码。似乎有250多人编辑了您的代码，但它不再工作，更改URL以返回到第一次修订就可以了。谢谢你让我知道@Johannes。我已经修复了链接。@Johannes@brianpeiris添加了

grid:[80,80]，

属性-第一个div（“可以在两个轴上拖动我！”）无法正常工作，只能移动到

x

轴而不是

Y

，这应该可以使用自定义拖动事件侦听器并更新ui.position对象。有关此方法的更多详细信息，请参阅。