如何找到 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 个元素放置到它们各自的目标位置..我只想在所有 3 个元素都放置在它们的位置时将页面重定向到另一个..如何找到元素是否被放置..谁能帮我解决这个问题？？

检查此 fiddle 以获得演示 http://jsfiddle.net/karthikchandran/stxzqskq/3/

Answer 1

您可以使用jQuery来计算被丢弃的元素的数量：

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

您可以检查这个并在预期的数字下降时执行操作：

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

Answer 2

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";
        }
        }

创建一个 checked() 函数并在每个可放置函数上调用它它将被重定向到给定的链接，如 fiddle 演示中所示，但在 fiddle 中它不会被重定向。

如何找到 jQuery 中所有被丢弃的元素

How to find all the dropped elements in jQuery

html

javascript

jquery

jquery-ui