如何使jQuery在X和Y轴固定的情况下可拖动?

问题描述：

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

I am wondering if there is a way to make the jQuery draggable to only drag straight up, down and left, right. I want to prevent the user from dragging a div diagonally. Using the grid option in the draggable UI is not possible in my situation.

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

这怎么可能?

谢谢！

答

我写了一个插件，允许在两个轴上移动可拖动对象.它可以完成工作，但最好将其实现为 jQuery UI小部件，而不是简单的jQuery插件.

I wrote a plugin that allows moving a draggable in both axes. It gets the job done but it would be better-implemented as a jQuery UI widget rather than a simple jQuery plugin.

托管的演示: http://jsbin.com/ugadu/1 (可通过 http://jsbin.com/ugadu/1/edit )

Hosted Demo: http://jsbin.com/ugadu/1 (Editable via 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; 
    } 
  }); 
};

如何使jQuery在X和Y轴固定的情况下可拖动?

相关推荐