Question

我有一个可拖动的对象，可以在几个droppables中接受..我已经把所有的droppable放在一个容器中，并且只是想能够检测到draggable是否悬停在droppables的容器上...

起初，我尝试使用'over'和'out'回调用于droppables，但它没有用，因为从一个droppable转移到另一个（在同一容器内）导致它认为鼠标已经离开容器......

所以我的下一个方法是在拖动开始回调中，在容器上执行mouseenter和mouseleave的事件监听器 - 然后停止监听拖动停止回调......

然而，这会导致完全疯狂的行为......如果你看一下我的示例页面：

http://collinatorstudios.com/www/jquery_draggable_test.html

当将盒子拖到红色dropzone时，你应该在mouseenter事件触发时看到“enter”，并在mouseleave发生时“离开”..但是，只需将盒子拖到容器内部就会导致“离开”出现了无数次.....我无法弄清楚为什么会发生这种情况，也不知道我的问题有什么解决方案，所以我可以做我需要做的事情。我现在已经做了近4个小时的工作了，而且我对于看起来应该如此简单的事情感到失望。

非常感谢任何帮助......谢谢。

Answer 1

尝试为容器添加droppable：

$('#drop_zone_container').droppable({
    over: function(){ feedback.text('enter')},
    out: function(){feedback.text('leave')}
});

Answer 2

您只需要绑定一次事件！每次都没有必要绑定和取消绑定它们......我在下面的代码中将它们分开，以便更清楚地了解绑定一次。

正如ZDYN所说（给他+1），你需要包含一个可放置的代码，但是不使用容器，而是使用里面的区域......这里有一个demo和完整的代码。

var feedback = $('#feedback');

$('.item').draggable({
    revert: true,
    zIndex: 999,
    cursor: 'move'
});

$('.drop_zone').droppable({
    drop: function(event, ui) {
        ui.draggable.appendTo($(this));
    }
}).bind('dropover dropout', function(e) {
    var id = this.id;
    feedback.text(e.type === 'dropover' ? 'Over: ' + id : 'Out: ' + id);
});

jQuery可拖动的问题，溢出时对象上的'scroll'：使用appendTo时隐藏的容器：'body'

2 个答案: