特定のエリアにドラッグ＆ドロップする

Question

私は、ユーザーが各カードを特定の順序で配置する必要のあるゲームを作成しようとしました。ドロップ可能な領域に名前をドラッグ＆ドロップすることはできますが、特定のカードを特定のスロットに割り当てる方法を教えてください。ここで

が私のjsコードです：

var correctCards = 0; 
$(init); 

function init() { 

    // Hide the success message 
    $('#successMessage').hide(); 
    $('#successMessage').css({ 
    left: '580px', 
    top: '250px', 
    width: 0, 
    height: 0 
    }); 

    // Reset the game 
    correctCards = 0; 
    $('#cardPile').html(''); 
    $('#cardSlots').html(''); 

    // Create the pile of shuffled cards 

    var cards = ["Aiba", "Ninomiya", "Ohno", "Sakurai", "Matsumoto"]; 
    cards.sort(function() { return Math.random() - .5 }); 

    for (var i=0; i<cards.length; i++) { 
    $('<div>' + cards[i] + '</div>').data('img',i).appendTo('#cardPile').draggable({ 
     containment: '#content', 
     stack: '#cardPile div', 
     cursor: 'move', 
     revert: true 
    }); 
    } 


    // Create the card slots 
    var slots = [ ' ', ' ', ' ', ' ', ' ']; 
    for (var i=1; i<=slots.length; i++) { 
    $('<div>' + slots[i-1] + '</div>').data('number', i).appendTo( '#cardSlots').droppable({ 
     accept: '#cardPile div', 
     hoverClass: 'hovered', 
     drop: handleCardDrop 
    }); 
    } 

} 

function handleCardDrop(event, ui) { 
    var slotNumber = $(this).data('name'); 
    var cardNumber = ui.draggable.data('name'); 

    // If the card was dropped to the correct slot, 
    // change the card colour, position it directly 
    // on top of the slot, and prevent it being dragged 
    // again 

    if (slotNumber == cardNumber) { 
    ui.draggable.addClass('correct'); 
    ui.draggable.draggable('disable'); 
    $(this).droppable('disable'); 
    ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'  }); 
    ui.draggable.draggable('option', 'revert', false); 
    correctCards++; 
    } 

    // If all the cards have been placed correctly then display a message 
    // and reset the cards for another go 

    if (correctCards == 10) { 
    $('#successMessage').show(); 
    $('#successMessage').animate({ 
     left: '380px', 
     top: '200px', 
     width: '400px', 
     height: '100px', 
     opacity: 1 
    }); 
    } 

} 

Answer 1

あなたはそれぞれに固有のIDを与えるとカードがどこにあるDIV（そう例えばcardSlot1、cardSlot2 ...）、あなたは（のdocument.getElementByIdを使用することができます」 cardSlot1 '）。cardの名前を取得するための値。

それは、次のようになります。

for (var i=0; i<cards.length; i++) { 
    $('<div id="cardSlot'+i+'">' + cards[i] + '</div>').data('img',i).appendTo('#cardPile').draggable({ 
     containment: '#content', 
     stack: '#cardPile div', 
     cursor: 'move', 
     revert: true 
    }); 
    }