jQuery Drag/Drop-Problem: mousemove Event nicht verbindlich für einige Elemente

Question

Verwenden der neuesten jQuery/UI, die bei Google gehostet werden. Ich habe das folgende Markup bekam:

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

Und die folgende 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 
}); 

});

Wenn ich die erste li über die zweite ziehen, wird die MouseMove-Funktion ausgelöst (und Firebug protokolliert die Ausgabe). Aber wenn ich die zweite li über die erste ziehe, wird die Mousemove-Funktion nicht ausgelöst. Sie können dies live unter http://jsbin.com/ivala sehen. Gibt es einen Grund dafür? Sollte ich das mousemove-Ereignis auf andere Weise einfangen?

Edit: Es scheint, als wäre das mouse move() -Ereignis für frühere Elemente nicht bindend, als das, das gerade gezogen wird (sollte beim MouseOver gebunden werden).

Answer 1

Es scheint, dass das Helferelement des ziehbaren Elements die Mausbewegungsereignisse isst. Wenn sich der Cursor über dem Helfer befindet, erhält der Container darunter keine mousemove-Ereignisse.

Versuchen Sie, den Helper-Offset vom Cursor zu positionieren, so dass der Cursor nie direkt das Hilfselement darunter hat. Sie können cursorAt Option tun dies ist mit ziehbar:

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

Answer 2

könnten Sie entweder versuchen, die pointerEvents CSS Stil zu Ihrem Helfer hinzuzufügen. Auf diese Weise würden alle Ereignisse das gezogene Element passieren.

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

Mit der vollen ziehbar stuff:

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

Answer 3

Dies ist, was ich getan habe und es funktioniert.

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