2

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

4

3 回答 3

7

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

尝试从光标定位助手偏移量，以便光标永远不会在其下方直接包含助手元素。您可以使用可拖动的 cursorAt 选项来执行此操作：

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

于 2011-11-14T14:59:13.083 回答
2

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

$(dragMe).draggable({ 
   start : function(e){
             $(this).css({'pointer-events': 'none'});
         }, 
   stop: function(e){
             $(this).css({'pointer-events': 'all'});
         }
})
于 2017-05-21T03:27:32.373 回答
1

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

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

使用完整的可拖动内容：

element.draggable({
    helper: function() {
        var clone = element.clone();
        clone.css('pointerEvents', 'none');
        return clone;
    }
})
于 2014-12-18T10:41:42.930 回答