jquery - 检查 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

可拖动元素是可放置元素的子元素(后代)吗？当他们被拖走时，他们会被移除吗？在这种情况下，您可以这样做:

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

更新:如果我理解正确的话，您将一个元素拖到 droppable 中(也许是放下了？)，然后拖了另一个元素并将其删除。在这种情况下，您可以跟踪哪些(或至少有多少)draggables 超过了您的 droppable 但没有出去。

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