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

Question

我有一个jQuery UI droppable元素，当可拖动对象悬停在它上面时，我希望它变得更大。我已经尝试了使用hoverClass选项和绑定到drophover事件。

从视觉上看，这两种方法都工作得很好。但是，一旦可拖放对象离开了可拖放对象的原始(较小)边界，jQuery UI会将其解释为“丢弃”，尽管它仍在当前(较大)边界内。

例如，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不会恢复到如此窄的高度

http://jsfiddle.net/kWFb9/2/

编辑：

更好的小提琴：http://jsfiddle.net/kWFb9/6/

我希望这能有所帮助:)

Answer 3

你可以在没有背景的情况下创建一个更大的(即#droppable.hovering的大小) div，并将你的droppable应用于它。注意，您没有提供超文本标记语言，但是新的#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()或this article的.livequery()

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

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