根據可拖動方向設置座標軸jQuery可拖動

Question

根據可拖動方向（初始化後）如何設置座標軸？

如果將它左右拖動，則它將爲x，y（如果向上拖動）。

$("#belt").draggable({ 
    handle: "li", 
    axis: "y", 
    start: function() { 

     //I want to be dragged in the axis i belong which should be x.... 

    }, 
}); 

Answer 1

可以使用距離最初約束運動以獲得哪個方向的用戶正在移動初始讀取，然後設置軸限制。

var x, y; 

$("#belt").draggable({ 
    start: function(event) { 
     x = event.originalEvent.pageX; 
     y = event.originalEvent.pageY; 
    }, 
    drag: function(event) { 
     if (x && y) { 
      axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y'; 
      $("#belt").draggable('option', 'axis', axis); 
      x = y = null; 
     }   
    }, 
    stop: function() { 
     x = y = null; 
     $("#belt").draggable('option', 'axis', false); 
    }, 
    distance: 20 
});​ 

這裏有一個小提琴：http://jsfiddle.net/jhchen/B7J2E/

Answer 2

欣賞答案jhchen！我分叉你的小提琴以包含一些代碼，以便軸鎖定僅在用戶在拖動時按住Shift鍵的情況下發生。

http://jsfiddle.net/B7J2E/40/

var x, y; 

$("#test").draggable({ 
    start: function(event) { 
     console.log(event); 
     x = event.originalEvent.pageX; 
     y = event.originalEvent.pageY; 
     console.log(x, y); 
    }, 
    drag: function(event) { 
     if (event.shiftKey) { 
      if (x && y) { 
       axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y'; 
       $("#test").draggable('option', 'axis', axis); 
       x = y = null; 
      }   
     } 
    }, 
    stop: function() { 
     x = y = null; 
     $("#test").draggable('option', 'axis', false); 
    }, 
    distance: 20 
});