jQuery 拖放问题 : mousemove Event not binding for some elements

标签 jquery jquery-ui draggable droppable drag-and-drop

使用 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() 事件不会绑定(bind)到比当前拖动的元素更早的元素(应该在鼠标悬停时绑定(bind))。

最佳答案

看来可拖动的辅助元素正在吞噬鼠标移动事件。如果光标位于助手上方，则下面的容器将不会接收 mousemove 事件。

尝试将辅助元素放置在距光标的偏移位置，以便光标永远不会在其正下方出现辅助元素。您可以使用draggable的cursorAt选项来做到这一点:

draggable({cursorAt: { 顶部: 5, 左侧: 5 } })

关于jQuery 拖放问题 : mousemove Event not binding for some elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1301696/