jQuery UI droppable:悬停时调整大小元素不起作用

Question

我有一个jQuery UI droppable元素,当一个draggable悬停在它上面时我想变得更大.我已尝试使用hoverClass选项并绑定到drophover事件.

在视觉上,这两种方法都可以正常工作.但是,一旦draggable退出droppable的原始(较小)边界,jQuery UI将其解释为"dropout",尽管仍然在当前(较大)边界内.

例如,js:

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

CSS:

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

在这种情况下,当可拖动悬停在可放置的粪便上时,可放置的粪便在视觉上增加到200px.如果此时,拖动器向下移动了20px,我预计它仍将悬停在可放置的上方.相反,jQuery UI会触发dropout事件,而droppable会恢复为10px高.

任何人都知道如何让它以我期望的方式行事吗？

jsFiddle示例:http://jsfiddle.net/kWFb9/

Answer 1

遇到了同样的问题，我可以通过使用以下选项来解决它：

$("#droppable").droppable({
    hoverClass: 'hovering',
    tolerance: 'pointer'
});

$('#draggable').draggable({
    refreshPositions: true
});

这是工作小提琴：http://jsfiddle.net/kWFb9/51/

请参阅http://bugs.jqueryui.com/ticket/2970

Answer 2

你可以创建一个更大的（即 #droppable.hovering 的大小）div没有背景的并将你的 droppable 应用于它。请注意，您没有提供 HTML，但新的#drop_container应该包含两个 div。

JS

var dropped;
$("#droppable").droppable({
    drop: function(event, ui) {
        dropped = true;
    }
});

$('#draggable').draggable({
    start: function(event, ui) {
        $("#droppable").addClass("hovering");
        dropped = false;
    },
    stop: function(event, ui) {
        if (!dropped) {
            $("#droppable").removeClass("hovering");
        }
    }
});

CSS

#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }

或者您可以尝试使用本文.live()或本文.livequery()中的其他解决方案

[编辑]我已经编辑了我的代码，这是一个jsfiddle： http: //jsfiddle.net/94Qyc/1/

我必须使用全局变量，我没有找到更好的方法来检查盒子是否被丢弃。如果有人有想法，那就太好了。