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

Question

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

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

这怎么可能？

谢谢!

Answer 1

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

1. 您可以使用axis选项限制特定轴上的拖动运动.例如:

   $('.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

我希望这有帮助.

Answer 2

我写了一个允许在两个轴上移动拖动的插件.它可以完成工作,但它可以更好地实现为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; 
    } 
  }); 
};