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

问题描述：

我有一个droppable div元素，当一个可拖动的元素被拖拽时淡出。这可以很好地使用out事件。我得到的问题是在droppable上有两个可拖动的元素。当我拖拽一个元素时，可拖拽元素仍然会褪色。我如何检查droppable上是否已经有另一个可拖动的元素，以便我可以取消淡入淡出效果。我希望droppable元素只在最后一个可拖动元素被取消时才会淡入淡出。

I have a droppable div element that fades out when a draggable element is dragged off it. This works fine using the out event. The problem I'm getting is when there are two draggable elements on the droppable. The droppable element will still fade when I drag one off. How can I check if there is already another draggable element on the droppable so I can cancel the fade effect. I want the droppable element to fade only when the last draggable element is taken off.

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

             });                
 }
});

答

可拖放元素子元素（子元素）？当它们被拖走时，它们是否从它移除？在这种情况下，你可以这样做：

Are the draggable elements children (descendants) of the droppable? And are they removed from it when when they are dragged off? In that case, you could do something like this:

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

更新：如果我理解正确，您将某个元素拖放到了可拖拽的位置（可能会放下它？），然后拖拽另一个元素并将其移除，在这种情况下，您可以跟踪其中（或者至少有多少）可拖动的广告已经超过了您的广告投放量，但并未消失。

Update: if I understand correctly, you dragged an element to the droppable (maybe dropped it?), then dragged another one, and removed it. In that case, you could keep track of which (or at least how many) draggables went over your droppable but didn't went out.

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

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

相关推荐