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

我有一个jQuery UI droppable元素，我希望当可拖动元素悬停在它上面时可以变大。我已经尝试使用hoverClass选项并绑定到drophover事件。jQuery UI droppable：悬停时调整大小元素不起作用

可见，这两种方法都可以正常工作。但是，一旦可拖动元素退出了可拖动的原始（较小）边界，jQuery UI将此解释为“丢弃”，尽管仍在当前（较大）边界内。

例如，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/

来源

2011-10-24 lucas

，因为我无法找到一个回答这个问题，我已经切换到使用本机拖放API，它没有这个问题（尽管它有自己的问题列表）。 – lucas

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

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/

我不得不使用全局变量，我没有找到更好的方法来检查盒子是否掉落。如果有人有想法，那会很棒。

来源

2011-10-24 13:13:02 JMax

，但是可以将可拖动的内容拖放到#drop_container的底部，而不会与#droppable交互，这会让用户感到困惑。 – lucas

@lucas：我编辑了我的答案，使用'activate'和'deactivate'。请张贴jsfiddle或至少您的HTML，以便我们可以尝试，如果它仍然不符合您的需求。 – JMax

我已添加jsFiddle链接 – lucas

所以我做了一对夫妇的调整，以你的小提琴

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

接下来我添加了一个动画来略微调整可拖动元素的大小。我不知道这是否是你想要的功能，所以我反正把它放在那里。

最后，当可拖动元素被放入可放置区域时，我将永久应用悬停类到可放置元素。这种方式可放开不会恢复到狭窄的高度时，有一个元素它

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

编辑：

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

我希望这有助于:)

来源

2011-11-27 02:51:22

这并没有解决问题。当可拖动物体悬停在其底部时，可投掷物仍会恢复到狭窄的高度。如果您尝试拖动可拖动以使其底部与可放下的底部内联，您会看到问题。 – lucas

@lucas我明白你的意思了。我已经编辑我的答案有一个更坚实的解决方案 –

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

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

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

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

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

来源

2014-07-02 15:28:45 rvignacio

的refreshPositions正是我需要什么，我用AngularJS从http://codef0rmer.github.io/angular-dragdrop拖N - 下降和有一个问题onOver没有开火，因为我之前隐藏了一个元素（动画） –

良好的工作rvignacio。这应该被标记为答案：refreshPositions：true – jon

有一个其他（呜呜呜呜）不坏的解决方案：

TL; DR：Fiddle

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

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

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

而widget的偏移量在$ .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() 
     }; 
    } 
})

来源

2014-08-28 11:06:00 DEY

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

回答

相关问题