Question

我需要帮助才能在卡片堆中的顶部数字被正确拉出并丢弃后输入一个随机数。这是我创建随机数的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);
 }                           
 }

Answer 1

如果我正确地解释了你的要求，你只需要让你的“牌组”非常大，并将所有的div叠加在一起，并且绝对定位。

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

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

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

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

可以拖放一个接一个地生成一个随机数

1 个答案: