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 に答える