Перетаскивание в определенную область

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

Если вы даете уникальный идентификатор для каждого Див, где карта (так, например, cardSlot1 cardSlot2 ...), вы можете использовать document.getElementById (» cardSlot1 ')., чтобы вернуть имя карты.

Это будет выглядеть примерно так:

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 
    }); 
    }