0

在正确拉出和放下纸牌堆中的顶部数字后，我需要帮助输入一个随机数。这是我创建随机数的 JavaScript 代码，我有 10 个插槽，所以每次我拉到正确的插槽时，随机数都会显示出来：

//Create the pile of shuffled cards
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.sort(function () {
    return Math.random() - .5
});

for (var i = 0; i < 10; i++) {

  $('<div>' + numbers[i] + '</div>')
    .data('number', numbers[i])
    .attr('id', 'card' + numbers[i])
    .appendTo('#cardPile')
    .draggable({
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
    });
}

//event to drag and check if it's correct or wrong place

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

  /* 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);
 }                           
 }
4

1 回答 1

0

如果我正确地解释了您的要求，您只需要使您的“卡片组”非常大，并以绝对定位将所有 div 堆叠在一起。 

.new-card {
    left: 10px;
    top: 10px;
    position: absolute;
}

然后，当您成功拖放每张卡时，下一张将自然显示。如果你真的想要一个无限的牌组，那么只要容器 DIV 没有更多的 DIV.new-card 孩子，你就可以重新生成堆栈。

我创建了一个 JSFiddle 来说明我对您的问题和我的建议的解释。至少，我希望这个例子对进一步讨论这个问题有所帮助。

http://jsfiddle.net/asciimo/5qAPe/1/

于 2013-06-24T18:44:24.157 回答