javascript - 当网格打开时如何获取可拖动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

尝试将网格偏移添加到您的语句中。这样，您仅在拖动穿过图 block (网格区域)时进行测试。

示例: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";
    }
  }
});