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

z index of layer!