网格打开时如何获得可拖动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";
    }
  }
});