0

ドラッグ可能な 3 つの画像と、それらが入る 3 つのドロップ可能な div があります。

3 つの画像すべてが 3 つのドロップ可能な div の 1 つに配置されたら、メッセージ ボックスを起動しようとしていますが、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