Как получить направление перетаскиваемого 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"; 
    } 
    } 
});