3

JQueryを使用して、マウスダウン後からマウスアップまでのマウスの動きをどのように追跡しますか？追跡は、ターゲット要素がクリックされたときに開始し、マウスがターゲット要素の外に移動した場合でも、マウスアップを継続する必要があります。

<div id="some_elt">
   <div id="target">
   </div>
</div>

私が考えることができる唯一の方法は、ドキュメント全体にバインドし、から設定および設定解除しmousemoveたグローバルフラグに基づいてモーションハンドラーを呼び出すことです。$("target").mousedown$("target").mouseup

これよりもエレガントなアプローチはありますか？

編集：私は余分なビットを追加する必要があると思います...私のターゲットはすでにそれにdraggable()適用されています。私はまともな画像ビューアを作ろうとしています。divドラッグ可能なビューポートがありimgます。ナビゲート用のドラッグ可能オブジェクトに干渉することなく、Shift+ミドルクリックなどで画像をズーム可能にしようとしています。ドラッグ可能な動作を実現するために、JQueryが内部で行うことを便乗する必要がありますか？

Edit2：私の編集に答えるために：もちろん違います！JQueryは素晴らしいです！

4

2 に答える 2

3

イベント ターゲットを使用してトラッキングを開始する

$(document).mousedown(function(event){
   if( event.target.id=="target"){
     $(this).on('mousemove',function(event){
          /* do tracking*/
      })
   }
}).mouseup(function(){
    $(this).off('mousemove');
})

1.7 未満のバージョンの jQuery の場合

$(document).mousedown(function(event){
   if( event.target.id=="target"){
     $(this).mousemove(function(event){
          /* do tracking*/
      })
   }
}).mouseup(function(){
    $(this).unbind('mousemove');
})
于 2012-06-17T21:28:44.497 に答える
2

最もエレガントな方法の 1 つは、 jQuery UI のドラッグ可能を使用することだと思います。

$("#target").draggable({
    start: function(event, ui) { console.log("start dragging"); },
    drag: function(event, ui) { console.log("continue dragging"); },
    stop: function(event, ui) { console.log("stop dragging"); }
});
于 2012-06-17T21:27:32.263 に答える