jQuery Drag/Drop problem: mousemove Event not binding for some elements
- by saturdayplace
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).
