jquery - Jquery ui仅在对象移动时调用函数

Question

所以，假设我有一个简单的 div：

<div class="drag"></div>

css 我认为在这种情况下无关紧要，这是我的简单draggable功能

$(".drag").draggable({
  axis: "y"
});

drag现在，只有当div 实际移动 1px 或更多时，我才能调用函数？我已经通过了所有事件和选项，我得到的关闭是drag事件，但问题是即使我的 div 静止不动，它也会继续执行，每 1 秒左右......

Answer 1

你会想做这样的事情：

$(".drag").draggable({
  axis: "y",
  start: function() {
    $(this).data('startPos', $(this).offset());
  },
  drag: function() {
    if ($(this).data('startPos') != $(this).offset()) {
      alert('It moved!');
    }
  }
});

Answer 2

这应该可以解决问题：

var lastPos = 0;
$("#drag").draggable({
  axis: "y",
  stop: function(event, ui) {
    if(Math.abs(ui.position.top - lastPos) >= 1)
    {
      //Moved 1px or more
      alert("Moved "+Math.abs(ui.position.top - lastPos)+" Pixels");
    }
    lastPos = ui.position.top;
  }
});

现在只需将以下内容替换为您的函数：

alert("Moved "+Math.abs(ui.position.top - lastPos)+" Pixels");