0

我有三个可拖动的图像和三个可放置的 div 供它们进入。

一旦所有三个图像都在三个可放置的 div 之一中，我试图让消息框触发，有没有办法只使用 jQuery 来做到这一点？如果重要的话，该项目将主要在 iPad 上使用。我想指出正确的方向。

JavaScript：

$('#widget').draggable();

$(window).bind("load", function() {
    $("#falcon,#falcon1,#falcon2").draggable({
        cursor : 'hand',
        start : function(event, ui) {
            $(this).data('startPosition', $(this).position());
        }
    });
    $("#falcon_USA").droppable({
        drop : function(event, ui) {
            if (!confirm('Yes! Falcons like Perry and others can be found from Canada to South America throughout the year!')) {
                $(ui.draggable).animate($(ui.draggable).data('startPosition'), 500);
            }
        }
    });
});

HTML：

<body onload="window.open('', '_self', '');">
    <h1> 
    Place a falcon in all of the areas that they can be found!<br> Drop the falcon onto the     map three times.
    </h1>

    <div id="falcon_USA"></div>
    <div id="falcon_Canada"></div>
    <div id="falcon_SA"></div>

    <div id="falcon" class="ui-widget-content">             
    <img src="Falcon.jpg" height="100" width="100" alt="falcon pic" />
    </div>
    <div id="falcon1" class="ui-widget-content">                
    <img src="Falcon.jpg" height="100" width="100" alt="falcon pic" />
    </div>
    <div id="falcon2" class="ui-widget-content">                
    <img src="Falcon.jpg" height="100" width="100" alt="falcon pic" />
     </div> 
     <div id="footer"><a href="javascript:window.close();"> Go Back to Perry G.</a></div>

</body>

这是一个 jsfiddle 来演示我到目前为止所做的事情：http: //jsfiddle.net/kYKeM/

4

0 回答 0