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

Question

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

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

Und das 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 nach unten über die zweite, die mousemove-Funktion ausgelöst (und Firebug protokolliert die Ausgabe). Aber wenn ich die zweite ziehen li über die erste, wird die Mausbewegungsfunktion nicht ausgelöst. Sie können dies live sehen unter http://jsbin.com/ivala . Gibt es dafür einen Grund? Sollte ich das Mousemove-Ereignis auf andere Weise abfangen?

Bearbeiten: Es scheint, als ob das mousemove()-Ereignis nicht für frühere Elemente als das aktuell gezogene gebunden ist (sollte bei deren Mouseover gebunden werden).

Answer 1

Es scheint, dass das Hilfselement des Draggables die Mausbewegungsereignisse aufnimmt. Wenn sich der Cursor über dem Hilfselement befindet, empfängt der Container darunter keine Mausbewegungsereignisse.

Versuchen Sie, das Hilfselement versetzt zum Cursor zu positionieren, so dass sich der Cursor nie direkt unter dem Hilfselement befindet. Sie können dies mit der Option cursorAt von draggable erreichen:

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

Answer 2

So habe ich es gemacht, und es funktioniert.

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

Answer 3

Sie können entweder versuchen, den CSS-Stil pointerEvents zu Ihrem Helfer hinzuzufügen. Auf diese Weise würden alle Ereignisse durch das gezogene Element gehen.

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

Mit allem, was sich ziehen lässt:

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