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

Posted 2023-05-08

【中文标题】jQuery UI droppable：悬停时调整元素大小不起作用

【英文标题】：jQuery UI droppable: resizing element on hover not working

【发布时间】：2011-12-14 03:09:21

【问题描述】：

我有一个 jQuery UI 可拖放元素，当可拖动元素悬停在它上面时，我希望它变得更大。我已经尝试使用 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; 

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

有人知道如何让它按照我期望的方式运行吗？

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

【问题讨论】：

由于我找不到这个问题的答案，我已经切换到使用本机拖放 API，它没有这个问题（尽管它确实有自己的问题列表)。

【参考方案1】：

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

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

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

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

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

【讨论】：

refreshPositions 正是我所需要的......我正在使用来自codef0rmer.github.io/angular-dragdrop 的 AngularJS 拖放，并且遇到了一个问题，即我之前隐藏了一个元素，因此 onOver 没有触发（动画）

干得好 rvignacio。这应该被标记为答案：refreshPositions: true

感谢 refreshPositions。 1 小时后它工作了！

【参考方案2】：

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

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

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

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

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

编辑：

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

我希望这会有所帮助:)

【讨论】：

这并没有解决问题。当可拖动对象悬停在其底部时，可放置对象仍会恢复到窄高度。如果您尝试拖动可拖动对象以使其底部与可放置对象的底部对齐，您会看到问题。

@lucas 我明白你的意思。我用更可靠的解决方案编辑了我的答案

【参考方案3】：

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

或者您可以尝试使用来自this article 的.live() 或.livequery() 的其他解决方案

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

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

【讨论】：

但是可以在不与 #droppable 交互的情况下将可拖动对象拖放到 #drop_container 的底部，这会让用户感到困惑。

@lucas：我已经编辑了我的答案以使用activate 和deactivate。请发布一个 jsfiddle 或至少是您的 HTML，以便我们可以在它仍然不符合您的需求时进行尝试。

在这个解决方案中，当拖动开始时，droppable 变得更大。我希望在 hover 上让它更大。

【参考方案4】：

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

TL;DR：Fiddle

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

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

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

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

This way 允许访问真正的插件属性，因此我们可以编写类似的内容：

$("#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()
        ;
    
)