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个元素都被丢弃在它们的位置时..如何查找元素是否被丢弃..可以任何人帮我这个??

检查这个小提琴演示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（）函数并在每个droppable函数上调用它它将被重定向到给定的链接，如小提琴演示中所示，但在小提琴中它不会重定向。

如何在jQuery中查找所有被删除的元素

2 个答案: