5

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

从视觉上看，这两种方法都可以正常工作。然而，一旦可拖动对象退出可放置对象的原始（较小）边界，jQuery UI 会将其解释为“dropout”，尽管它仍在当前（较大）边界内。

例如，js：

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

CSS：

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

在这种情况下，当可拖动对象悬停在可放置对象上时，可放置对象的大小在视觉上会增加到 200 像素。如果此时，可拖动对象向下移动了 20px，我希望它仍然悬停在可放置对象上。相反，jQuery UI 触发 dropout 事件，并且 droppable 恢复为 10px 高。

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

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

4

4 回答 4

5

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

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

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

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

见http://bugs.jqueryui.com/ticket/2970

于 2014-07-02T15:28:45.157 回答
2

所以我对你的小提琴做了一些调整

首先，我将 droppable 容差设置为“touch”，只要可拖动的任何部分接触它就会激活。这会导致应用悬停类。

接下来我添加了一个动画来稍微调整您的可拖动元素的大小。我不确定这是否是您想要的功能，所以我还是把它放在那里。

最后，当可拖动元素被拖放到可放置区域时，我将悬停类永久应用于可放置元素。这样，当其中有元素时，droppable 不会恢复到那个狭窄的高度

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

编辑：

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

我希望这有帮助 ：）

于 2011-11-27T02:51:22.417 回答
1

你可以在没有背景的情况下创建一个更大的（即#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/

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

于 2011-10-24T13:13:02.697 回答
0

还有另一个（哼哼）不错的解决方案：

TL;DR：小提琴

问题是插件在创建小部件时存储了 dom 元素的大小值（类似于）：

//jquery.ui.dropable.js
$.widget("ui.droppable", {
   ...
    _create: function() {

    var proportions,
       this.proportions = function() { return proportions; }

小部件的偏移量在 $.ui.ddmanager.prepareOffsets(); 中初始化。所以我们只需要覆盖比例对象。

这种方式允许访问真正的插件属性，因此我们可以编写如下内容：

$("#droppable").droppable({
    hoverClass: 'hovering',
    over: function(ev, ui) {
        var $widget = $(this).data('droppable');
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };    
    },
    out: function(ev, ui) {
        var $widget = $(this).data('droppable'); //ui-droppable for latests versions
        $widget.proportions = {
            width: $(this).width(),
            height: $(this).height()
        };
    }
})
于 2014-08-28T11:06:00.857 回答