1

jquery のドラッグ可能なプラグインを使用して、単純なドラッグ アンド ドロップ ゲームを作成しています。

円、四角、三角、星の 4 つの形状と、div 内の 4 つのドロップオフ エリアがあります。

<div class="drag">
    <div class="container">
        <div id="circle"></div>
    </div>
    <div class="container">
        <div id="square"></div>
    </div>
    <div class="container">
        <div id="triangle"></div>
    </div>
    <div class="container">
        <div id="star"></div>
    </div>
</div>
<div class="drop">
    <div class="container">
        <div id="circle"></div>
    </div>
    <div class="container">
        <div id="square"></div>
    </div>
    <div class="container">
        <div id="triangle"></div>
    </div>
    <div class="container">
        <div id="star"></div>
    </div>
</div>

たとえば、これは円の情報です (残りの形状についても同じことを想像してください)。

function init() {
$('.drag #circle').data('shape','circle').draggable({
    cursor: 'move',
    stack: '#circle',
    revert: true
});
    $('.drop #circle').data('shape','circle').droppable( {
        accept: '#circle',
        drop: handleDropEvent
    } );
};
init();

これはハンドル ドロップ イベントです。

function handleDropEvent( event, ui ) {
    var item = $(this).data('shape');
    var drop = $(this).data('shape');
    var dragItem = ui.draggable;
    if (item==drop){
        dragItem.position( { of: $(this), my: 'left top', at: 'left top' } );
        dragItem.draggable( 'option', 'revert', false );
        dragItem.draggable( 'disable' );
        $(this).droppable( 'disable' );
        correctMatch++;

    } 
    if ( correctMatch == 4 ) {
        $('.replay').show();
        $('.replay').click(function(){
            init();
        });
    }
}

現在、再生クラスには再生ボタンがあります。シェイプを元の位置に戻すにはどうすればよいですか?

4

1 に答える 1

0

元の位置を保存した場合は、すべてを最初から再構築してから、すべてを再びドラッグ可能にすることができます。もちろん、最も簡単な方法はページをリロードすることですが、それはしたくないと思います。したがって、いくつかの方法を考えることができます。1) ドキュメントの準備ができたら、項目を最初から再構築するのに十分な情報を配列に保存します。丸、四角、三角、星の 4 つのクラスがあるようです。IDを順番に配列に格納するだけです

var initial_state=['circle', 'square', 'triangle', 'star']

ユーザーが再生ボタンをクリックするたびに、この情報を使用して再構築します。

$('.drag, .drop').html('')//Clean up the containers
var a='';
for (i in initial_state){
    a+='<div class="container" ><div id="'+i+'"></div></div>';//generate the html to append
}
$('.drag, .drop').append(a);//append it to the containers

DOM が変更されたため、ドラッグ可能な関数を再度バインドする必要があります。

2) 同じ配列を使用しますが、実際のアイテムをその位置に移動します。これはセレクターの悪夢になる可能性がありますが、可能です。いつでも DOM 要素を var に割り当てて、それをページ内で自由に移動できます。

var circle= $('.drag.container #star').eq[0]

eq を使用すると、一連の要素から最初/2 番目/etc の要素を選択できます。コードが正しく動作するためには、1 つの要素のみを選択していることを確認する必要があります。HTMLコードでIDを繰り返していることを考慮してください。これは避けたいものです。それらをクラスに変更しないと、この種の操作はせいぜいトリッキーになります。

于 2012-05-22T05:34:06.443 に答える