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");

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

2 个答案: