jquery - Jquery uiは、オブジェクトが移動したときにのみ関数を呼び出します

Question

だから、私は1つの単純なdivを持っているとしましょう:

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

この場合、cssは問題ではないと思います。ここに私の単純なdraggable関数があります

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

dragdivが実際に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");