jQuery Drag/Drop problem: mousemove Event not binding for some elements

Question

Using the latest jQuery/UI that are hosted at Google. I've got the following markup:

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

And the following 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
});

});

If I drag the first li down over the second, the mousemove function fires (and firebug logs the output). But if I drag the second li up over the first, the mousemove function doesn't fire. You can see this live at http://jsbin.com/ivala. Is there a reason for this? Should I be trapping the mousemove event in some other way?

Edit: It appears as thought the mousemove() event isn't binding for earlier elements than the one currently being dragged (should be bound upon their mouseover).

Answer 1

It appears the draggable's helper element is eating the mouse move events. If the cursor is over the helper the container underneath will not receive mousemove events.

Try to position the helper offset from the cursor so the cursor never has the helper element directly underneath it. You can do this with draggable's cursorAt option:

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