jQuery拖放问题:mousemove事件没有绑定某些元素
使用Google托管的最新jQuery/UI。我有以下标记:jQuery拖放问题:mousemove事件没有绑定某些元素
<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()事件没有绑定的早期元素比当前正在拖动(应绑定到他们的鼠标悬停)。
看来可拖动的帮手元素正在吃掉鼠标移动事件。如果光标位于帮助器上,下面的容器将不会收到mousemove事件。
尝试定位游标的助手偏移量,以便游标永远不会在其正下方有助手元素。你可以用拖动的cursorAt选项做到这一点:
draggable({ cursorAt: { top: 5, left: 5 } })
我打算把这个标记为答案,尽管我问过这个问题已经超过了24个月,现在完全没有想法,为什么我需要这个答案。 – saturdayplace 2011-11-15 18:32:41
:)谢谢。我有类似的问题,并认为这可能会修复它,并解释您注意到的间歇性行为(例如,鼠标移动比拖拉助手更快,在助手捕捉到鼠标之前导致一些鼠标移动事件)。 – Max 2011-11-15 19:17:50
你既可以尝试将pointerEvents CSS样式添加到您的帮手。这样,所有事件都会通过拖动的元素。
clone.css('pointerEvents', 'none');
有了完整的可拖动的东西:
element.draggable({
helper: function() {
var clone = element.clone();
clone.css('pointerEvents', 'none');
return clone;
}
})
这是我做了什么和它的作品。
$(dragMe).draggable({
start : function(e){
$(this).css({'pointer-events': 'none'});
},
stop: function(e){
$(this).css({'pointer-events': 'all'});
}
})
我打开链接,有时将第二个li拖拽到第一个firebug上记录输出。但是,第一个过程比第一个过程更容易。 – 2009-08-19 18:58:05
我也注意到了。这不是regualr行为;非常令人费解。 – saturdayplace 2009-08-19 21:26:34
你想通过添加mousemove事件来完成什么? – PetersenDidIt 2009-08-22 15:20:45