user2058284 user2058284 - 1 month ago 10
jQuery Question

Elated drag-and-drop tutorial

I am trying to use the example from Elated for a drag and drop Jquery game. http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html I have gotten everything to work, but I would like to make the drop items random also. Can someone help me with this?

// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];

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


Here is all of the code:

<script type="text/javascript">

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 numbers = [];
numbers [ 0 ] = {x:1, y:'red'};
numbers [ 1 ] = {x:2, y:'orange'};
numbers [ 2 ] = {x:3, y:'yellow'};
numbers [ 3 ] = {x:4, y:'green'};
numbers [ 4 ] = {x:5, y:'sky blue'};
numbers [ 5 ] = {x:6, y:'indigo'};
numbers [ 6 ] = {x:7, y:'violet'};
numbers [ 7 ] = {x:8, y:'blue'};
numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<8; i++ ) {
$('<div>' + numbers[i].y + '</div>').data( 'number', numbers[i].x ).attr( 'id', 'card1' ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}

// Create the card slots
var words = [];
words [ 0 ] = {x:1, y:'red'};
words [ 1 ] = {x:2, y:'orange'};
words [ 2 ] = {x:3, y:'yellow'};
words [ 3 ] = {x:4, y:'green'};
words [ 4 ] = {x:5, y:'sky blue'};
words [ 5 ] = {x:6, y:'indigo'};
words [ 6 ] = {x:7, y:'violet'};
words [ 7 ] = {x:8, y:'blue'};
for ( var i=1; i<=8; i++ ) {
$('<div>' + words[i-1].y + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}

}

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

}

</script>

</head>
<body>

<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>

<div id="content">

<div id="cardPile"> </div>
<div id="cardSlots"> </div>

<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>

</div>

Answer

Edit this part

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

to this

for ( var i=1; i<8; i++ ) {
    $('<div>' + words[i].y + '</div>').data( 'number', words[i] ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }