jQuery拖放问题:mousemove事件没有绑定某些元素

Question

使用Google托管的最新jQuery/UI.我有以下标记:

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

以下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
});

});

如果我将第一个li向下拖过第二个,则会触发mousemove函数(并且firebug会记录输出).但是如果我将第二个拖动到第li一个上面,则mousemove函数不会触发.你可以看到这个http://jsbin.com/ivala.是否有一个原因？我应该以其他方式捕获mousemove事件吗？

编辑:似乎认为mousemove()事件对于早期元素的绑定不是当前被拖动的元素(应该在鼠标悬停时绑定).

Answer 1

看来draggable的帮手元素正在吃掉鼠标移动事件.如果光标位于帮助器上,则下面的容器将不会接收mousemove事件.

尝试将辅助对象偏移到光标位置,这样光标就不会直接在其下面有辅助元素.您可以使用draggable的cursorAt选项执行此操作:

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