我想知道是否有办法让jQuery的可拖动只拖直上，下，左，右。 我想防止用户从斜拖动一个div。 在拖动UI使用网格选项是不可能在我的处境。
http://jqueryui.com/demos/draggable/#constrain-movement
这怎么可能？
谢谢！
Answer 1:
我写了允许移动可拖动两轴的插件。 它能够完成任务，但它会更好地实现作为一个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;
}
});
};
Answer 2:
jQueryUI的支持用于控制拖动的固定轨道上的两个方法。
您可以使用轴选项来限制对特定轴拖拽移动。 例如：
$('.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 3:
使用拖动事件，你的优势
$('.selector').draggable({
drag: function(event, ui) { ... }
});
我不是100％确定如何，但里面在这里，你可以做上的坐标进行检查。 作为〜插孔Laplante提供说，这是你能比较一下。 如果坐标更靠近比y中的x轴，改变轴为x
//setter
$('.selector').draggable('option', 'axis', 'x');
如果其他的方式，改变周围为y。 这将让你捕捉运动总是有项目无论是在x轴或y轴（从起点）。 你必须做一次检查要离开该项目无论它是，如果轴是说（X + N，Y + N），但它是非常令人印象深刻，如果有人得到了比停留在几个像素更多| X | = | 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（X偏移 ）== ABS（Y偏移 ），然后你就可以触发一个事件申请时，x和/或y距离是约束大于一些任意小的整数，说“3”。
接下来的问题要处理的是从你想允许用户更改轴的轴约束的一次点火多远。 我猜你想要一个网格效果，所以你必须设置数的像素您删除约束并查找用户要拖到下一个“方向”之前移动阈值。
这是一个有趣的挑战，也是一个很好的学习经验，如果你知道如何做到这一点。
文章来源: How to make jQuery draggable with fixed X and Y axis?
