如何在網格打開時獲取可拖動div的方向？

Question

你好，我試圖在網格打開的時候拖動可拖動div的方向。所以，當我拖動div的方向或位置左側記錄的鼠標移動，而不是當網格完成div。所以我想知道當網格完成時div的方向我的意思是當div被拖動到網格值時。有可能得到那個嗎？謝謝！

這裏是我的jsfiddle：

https://jsfiddle.net/36z1pj2f/

代碼：

$(".draggable2").draggable({ 
    grid: [10, 10], 
    start: function(event, ui) { 
     this.previousPosition = ui.position; 
    }, 
    drag: function(event, ui) { 
     var test = ui.position.left; 

     console.log("test", test); 

     var direction = (test > this.previousPosition.left) ? 'right' : 'left'; 
     console.log('moving ' + direction) 

     this.previousPosition.left = test; 
    } 
}); 

Answer 1

嘗試在網格偏移的聲明，但補充。這樣你只能測試拖動是否穿過一個圖塊（網格）。

例子：https://jsfiddle.net/Twisty/36z1pj2f/1/

jQuery的

$(".draggable2").draggable({ 
    grid: [40, 40], 
    start: function(event, ui) { 
    this.previousPosition = ui.position; 
    }, 
    drag: function(event, ui) { 
    var grid = $(this).draggable("option", "grid"); 
    var leftOff = grid[0]; 
    var topOff = grid[1]; 
    var test = ui.position.left; 
    var direction; 
    if (test + leftOff < this.previousPosition.left) { 
     direction = "Left"; 
     this.previousPosition.left = test; 
     console.log('moving ' + direction) 
    } else if (test - leftOff > this.previousPosition.left) { 
     direction = "Right"; 
     this.previousPosition.left = test; 
     console.log('moving ' + direction) 
    } else { 
     direction = "none"; 
    } 
    } 
});