jQuery 拖放问题：mousemove 事件未绑定某些元素答案

【问题标题】：jQuery Drag/Drop problem: mousemove Event not binding for some elementsjQuery 拖放问题：mousemove 事件未绑定某些元素
【发布时间】：2009-08-19 18:13:06
【问题描述】：

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

【问题讨论】：

我打开了链接，有时将第二个 li 向上拖到第一个 firebug 上会记录输出。但是将第一个向上拖到第二个上要容易得多。
我也注意到了。这不是正常的行为；非常令人费解。
你想通过添加 mousemove 事件来完成什么？
我想知道鼠标光标相对于元素的位置，上/中/下。

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

【解决方案1】：

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

尝试定位从光标偏移的辅助元素，这样光标就不会在其正下方有辅助元素。您可以使用可拖动的 cursorAt 选项来做到这一点：

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

【讨论】：

我将把它标记为答案，尽管我已经问了超过 24 个月，现在完全不知道我为什么需要这个。
:) 谢谢。我有一个类似的问题，并认为这可能会解决它并解释您注意到的间歇性行为（例如，鼠标移动得比拖动助手快，在助手赶上鼠标之前导致一些鼠标移动事件）。

【解决方案2】：

这就是我所做的，并且有效。

$(dragMe).draggable({ 
   start : function(e){
             $(this).css({'pointer-events': 'none'});
         }, 
   stop: function(e){
             $(this).css({'pointer-events': 'all'});
         }
})

【讨论】：

【解决方案3】：

您可以尝试将 pointerEvents CSS 样式添加到您的助手。这样，所有事件都会通过拖动的元素。

clone.css('pointerEvents', 'none');

使用完整的可拖动内容：

element.draggable({
    helper: function() {
        var clone = element.clone();
        clone.css('pointerEvents', 'none');
        return clone;
    }
})

【讨论】：