检查 droppable 是不是已经包含另一个可拖动元素（jQuery UI）

Posted 2023-05-08

【中文标题】检查 droppable 是不是已经包含另一个可拖动元素（jQuery UI）

【英文标题】：Check if droppable already contains another draggable element (jQuery UI)检查 droppable 是否已经包含另一个可拖动元素（jQuery UI）

【发布时间】：2012-02-03 19:55:24

【问题描述】：

我有一个可拖放的 div 元素，当一个可拖动元素被拖出它时，它会淡出。使用 out 事件可以正常工作。我遇到的问题是当 droppable 上有两个可拖动元素时。当我拖掉一个可放置元素时，它仍然会消失。如何检查 droppable 上是否已经有另一个可拖动元素，以便取消淡入淡出效果。我希望仅当最后一个可拖动元素被取下时，可放置元素才会消失。

$(".droppable-element").droppable(
    tolerance: 'touch',
    out:function(event,ui)

       /*Need to first check if there is another draggable element in the droppable before fading out.*/
            $(this).fadeOut('slow', function()
                // Animation complete.

             );                
 
);

【参考方案1】：

可拖动元素是 droppable 的子元素（后代）吗？当他们被拖走时，他们是否会被移除？在这种情况下，您可以这样做：

if ( $(this).find(".draggable-element").length == 0 )
    $(this).fadeOut('slow', function()

更新：如果我理解正确的话，您将一个元素拖到了可放置对象中（可能是丢弃了它？），然后拖了另一个元素，然后将其移除。在这种情况下，您可以跟踪哪些（或至少有多少）可拖动项超出了您的可放置项但没有退出。

$(".droppable-element").droppable(
    tolerance: 'touch',
    over:function(event,ui) 
        var howMany = $(this).data("howMany") || 0;
        $(this).data("howMany", howMany+1);
    ,
    out:function(event,ui)
        var howMany = $(this).data("howMany") || 1;
        $(this).data("howMany", howMany-1);
        if ( howMany == 1 )
            $(this).fadeOut('slow', function()
                // Animation complete.
            );
    
);

【讨论】：

不，它们是分开的，否则我可以使用 has 选择器