如何使用固定的X和Y轴使jQuery可拖动？
我想知道是否有办法使jQuery可拖动只能直接向上，向下和向左，向右拖动。 我想阻止用户沿对角线拖动div。 在我的情况下，无法使用可拖动UI中的网格选项。
http://jqueryui.com/demos/draggable/#constrain-movement
这怎么可能？
谢谢！
我写了一个允许在两个轴上移动拖动的插件。 它完成了工作，但它可以更好地实现为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; } }); }; jQueryUI支持两种控制固定轨道拖动的方法。
-
您可以使用axis选项限制特定轴上的拖动运动。 例如：
$('.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
我希望这有帮助。
使用拖动事件对您有利
$('.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 | 线。
您没有指定轴是否始终保持最初开始的位置，或者它们是否根据可拖动项目在拖动开始时的位置而变化（如果您稍微移动它，然后放开，并尝试再拖动它） 。 有一个开始：结束：事件也可以帮助你完成这一部分。
究竟你想要拖动哪些不能对角线，但可以向左，向右，向上和向下移动？
我发布了这个答案，经过多次调整后说， 只有对该对象进行jqueryui调用是不可能的。 您似乎在拖动时不允许更改约束轴。
请certificate我错了？
我没有准确的代码，但我可以通过帮助您更深入地思考问题来指出正确的方向。
因此用户开始拖动无约束的对象。 当物体从起点移动一个像素时，如果第一个像素位于这四个（ 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距离为0时，你可以触发一个事件来应用约束。大于某个任意小整数，比如“3”。
要处理的下一个问题是，您希望允许用户更改轴的轴约束的最后一次触发的距离。 我猜你想要一个网格效果，所以在删除约束并寻找用户想要拖动的下一个“方向”之前，你必须设置一个像素移动阈值。
如果你弄清楚如何去做，这是一个有趣的挑战和良好的学习经验。