Как найти все отброшенные элементы в jQuery

Question

.dropped 
    { 
     position: static !important; 
    } 
    #dvSource 
    { 
     padding: 5px; 
     min-height: 100px; 
     width: 470px; 
     margin-top: 300px; 
    } 
    #dvSource img { 
     padding-left: 10px; 
    } 
    .one { 
     left: 20px; 
    } 
    .nodrop { 
     padding-left: 20px; 
    } 
    #dvDest 
    { 
     background:url(images/line_background.png); 
     min-height: 100px; 
     width: 110px;  
     float: left;  
     margin-left: 20px;   
    } 

    #dvDest1 
    { 
     background:url(images/line_background.png); 
     display: inline-block; 
     min-height: 100px; 
     width: 110px; 
     margin-left: 10px;   
    } 
    #dvDest2 
    { 
     background:url(images/line_background.png); 
     display: inline-block; 
     min-height: 100px; 
     width: 110px; 
     margin-left: 10px;   
    } 

    #otherimgs { 
     float: left; 

    } 
    .allcontent { 
     width: 700px; 
     margin-top: 120px; 
    } 
    .contain { 
     text-align: center; 

    } 
    .contain img { 
     margin-left: 20px; 

    } 
    .popup { 
     position: absolute; 
     top: 280px; 
     right: 480px; 
    } 
    .popup img { 
     width: 435px; 
     height: 134px; 

    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function hideerror() { 
    $('.popup').remove(); 
} 

    $(function() { 
     $("#dvSource img.one").draggable({ 
      revert: function() { 
       $(this).delay(600); 
       return true 
      }, 
      revertDuration: 500, 
      refreshPositions: true,    
      stop: function (event, ui) { 
       $("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200); 
      } 
     }); 

     $("#dvSource img.one1").draggable({ 
      revert: function() { 
       $(this).delay(600); 
       return true 
      }, 
      revertDuration: 500, 
      refreshPositions: true, 
      stop: function (event, ui) { 
       $("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200); 
      } 
     }); 
     $("#dvSource img.one2").draggable({ 
      revert: function() { 
       $(this).delay(600); 
       return true 
      }, 
      revertDuration: 500, 
      refreshPositions: true, 
      stop: function (event, ui) { 
       $("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200); 
      } 
     }); 

     $("#dvDest").droppable({ 
     accept: '#dvSource img.one', 
      drop: function (event, ui) { 
       if ($("#dvDest img").length == 0) { 
        $("#dvDest").html(""); 
       } 
       ui.draggable.addClass("dropped"); 
       $("#dvDest").append(ui.draggable);     
       $("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300); 
       $(this).hideerror(); 
      } 
     }); 
     $("#dvDest1").droppable({ 
     accept: '#dvSource img.one1', 
      drop: function (event, ui) { 
       if ($("#dvDest1 img").length == 0) { 
        $("#dvDest1").html(""); 
       } 
       ui.draggable.addClass("dropped"); 
       $("#dvDest1").append(ui.draggable); 
       $("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300); 
       $(this).hideerror(); 
      } 
     }); 
     $("#dvDest2").droppable({ 
     accept: '#dvSource img.one2', 
      drop: function (event, ui) { 
       if ($("#dvDest2 img").length == 0) { 
        $("#dvDest2").html(""); 
       } 
       ui.draggable.addClass("dropped"); 
       $("#dvDest2").append(ui.draggable); 
       $("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300);     
       setTimeout(function() { 
        window.location.href = "6.htm"; 
       }, 1500); 
       $(this).hideerror(); 
      } 
     }); 

    }); 
</script> 
<div class="allcontent"> 
<div id="otherimgs"> 
    <img alt="" src="images/large_ball.png" /> 
    <img alt="" src="images/medium_ball.png" /> 
    <img alt="" src="images/small_ball.png" /> 
</div> 
<div class="contain"> 
    <div id="dvDest"></div> 
    <div id="dvDest1"></div> 
    <div id="dvDest2"></div> 
</div> 
</div> 
<div id="dvSource"> 
    <img class="one" alt="" src="images/large_ball.png" /> 
    <img class="one1" alt="" src="images/medium_ball.png" /> 
    <img class="one2" alt="" src="images/small_ball.png" /> 
</div> 

Здесь я сделал 3 элемента, которые можно отбрасывать в соответствующее место назначения .. i хочу перенаправить страницу на другую, только когда все 3 элемента будут отброшены на свои места. как найти, отбрасывается ли элемент. Может ли кто-нибудь помочь мне с этим?

проверить эту скрипку для демонстрации http://jsfiddle.net/karthikchandran/stxzqskq/3/

Answer 1

Fiddle Demo попробовать этот

function checked() 
     { 
     var i = 0; 
     if($("#dvDest").children("img").hasClass("dropped")) 
     { 
     i++; 
     } 
     if($("#dvDest1").children("img").hasClass("dropped")) 
     { 
     i++; 
     } 
     if($("#dvDest2").children("img").hasClass("dropped")) 
     { 
     i++; 
     } 
     console.log(i); 
     if(i ==3) 
     { 
     window.location.href="http://google.com"; 
     } 
     } 

создать функцию проверены() и вызвать его на каждой сбрасываемой функции он будет получать перенаправлены на данный компонуются как показано на скрипке демо, но в скрипку он не будет перенаправлять.

Answer 2

Вы можете использовать JQuery для подсчета количества элементов, которые отбрасываются:

var count = $(".dropped").length; 

Вы можете проверить это и выполнить действие, если ожидаемое число отбрасываются:

if (count === 3) { ... }