jQueryドラッグ・ドロップの問題：mousemoveイベントが一部の要素にバインドされていません

Question

Googleでホストされている最新のjQuery/UIを使用しています。

<ul id="tree"> 
    <li><a href="1/">One</a></li> 
<li><a href="2/">Two</a></li> 
</ul> 

そして、次のjavascript：私は、次のマークアップ持っている

$(document).ready(function(){ 

    // Droppable callbacks 
function dragOver(overEvent, ui_object) { 
    $(this).mousemove(function(moveEvent){ 
     console.log("moved over", this); 
    }); 
} 

function drop_deactivate() { 
    $(this).unbind(); 
} 

function drag_out() { 
    $(this).unbind(); 
} 

// Actual dragging 
$("#treeContainer li").draggable({ 
    revert: true, 
    revertDuration: 0 
}); 

// Actuall dropping 
$("a").droppable({ 
    tolerance: "pointer", 
    over: dragOver, 
    deactivate: drop_deactivate, 
    out: drag_out 
}); 

を}）;

最初のliを2番目にドラッグすると、mousemove関数が起動します（そして、firebugは出力をログに記録します）。しかし、最初の2番目のliを上にドラッグすると、mousemove関数は起動しません。このライブはhttp://jsbin.com/ivalaにあります。これには理由がありますか？何か他の方法でmousemoveイベントをトラップする必要がありますか？

編集：mousemove（）イベントは、現在ドラッグされている要素（マウスオーバー時にバインドする必要があります）よりも前の要素に対してバインドされていないと考えられます。

Answer 1

ドラッグ可能なヘルパー要素がマウスの移動イベントを食べているようです。カーソルがヘルパーの上にある場合、下のコンテナはmousemoveイベントを受け取りません。

ヘルパーオフセットをカーソルからはずすようにして、カーソルのすぐ下にヘルパー要素がないようにしてください。あなたは、ドラッグ可能なのcursorAtオプションでこれを行うことができます：あなたは、あなたのヘルパーにpointerEventsのCSSスタイルを追加しようとする可能性のいずれか

draggable({ cursorAt: { top: 5, left: 5 } })

Answer 2

。そうすれば、すべてのイベントがドラッグされた要素を通過します。フルドラッグ可能なもので

clone.css('pointerEvents', 'none'); 

：

element.draggable({ 
    helper: function() { 
     var clone = element.clone(); 
     clone.css('pointerEvents', 'none'); 
     return clone; 
    } 
}) 

Answer 3

これは私が行っている、それがどのような作品です。

$(dragMe).draggable({ 
    start : function(e){ 
      $(this).css({'pointer-events': 'none'}); 
     }, 
    stop: function(e){ 
      $(this).css({'pointer-events': 'all'}); 
     } 
})