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

Question

我有一个可拖放的 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.

             });                
 }
});

Answer 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.
            });
    }
});