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

发布于 2024-08-01 21:44:52 字数 1206 浏览 13 评论 0原文

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

原文

Using the latest jQuery/UI that are hosted at Google. I've got the following markup:

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

And the following 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
});

});

If I drag the first li down over the second, the mousemove function fires (and firebug logs the output). But if I drag the second li up over the first, the mousemove function doesn't fire. You can see this live at http://jsbin.com/ivala. Is there a reason for this? Should I be trapping the mousemove event in some other way?

Edit: It appears as thought the mousemove() event isn't binding for earlier elements than the one currently being dragged (should be bound upon their mouseover).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风为裳 2024-08-08 21:44:52

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

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

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

回复收藏 0 原文

身边 2024-08-08 21:44:52

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

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

This is what I have done and it works.

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

回复收藏 0 原文

公布 2024-08-08 21:44:52

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

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

有了完整的可拖动的东西：

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

You could either try to add the pointerEvents CSS style to your helper. That way, all events would pass though the dragged element.

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

With the full draggable stuff:

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

回复收藏 0 原文

~没有更多了~