var droppedNums = 0;
$(restart);
function restart() {
$('#msgWhenTaskDone').hide();
$('#msgWhenTaskDone').css({
left: '580px',
top: '250px',
width: 0,
height: 0
});
droppedNums = 0;
$('#numsPile').html('');
$('#numsSlot').html('');
var numbers = [1234, 99, 2000, 1111, 55, 19, 500, 8, 39, 77];
numbers.sort(function() {
return Math.random() - 0.5
});
for (var i = 0; i < 10; i++) {
$('<div>' + numbers[i] + '</div>').data('number', numbers[i]).attr('id', 'card' + numbers[i]).appendTo('#numsPile').draggable({
containment: '#NumsMain',
stack: '#numsPile div',
cursor: 'move',
revert: true
});
}
var words = ['1234', '99', '2000', '1111', '55', '19', '500', '8', '39', '77'];
for (var i = 1; i <= 10; i++) {
$('<div>' + words[i - 1] + '</div>').data('number', words[i - 1]).appendTo('#numsSlot').droppable({
accept: '#numsPile div',
hoverClass: 'hovered',
drop: numsDropEventHandler
});
}
}
function numsDropEventHandler(event, ui) {
var slotNum = $(this).data('number');
var cardNum = ui.draggable.data('number');
if (slotNum == cardNum) {
ui.draggable.addClass('matching'); //addClass() is method;
ui.draggable.draggable('disable');
$(this).droppable('disable');
ui.draggable.position({of: $(this), my: 'left top', at: 'left top'}); //position() is the method;
ui.draggable.draggable('option', 'revert', false); //draggable() is the method & values passed in are arguments;
droppedNums++;
}
if (droppedNums == 10) {
$('#msgWhenTaskDone').show();
$('#msgWhenTaskDone').animate({
left: '380px',
top: '280px',
width: '400px',
height: '100px',
opacity: 1
});
}
}
#msgWhenTaskDone h3 {
font-family: 'Lucida Sans Unicode', sans-serif
}
#NumsMain {
margin: 60px 80px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-align: center
}
#numsPile {
/*background: #ffd;*/
height: 200px;
width: 400px
}
#numsSlot {
height: 250px;
width: 400px;
}
#numsSlot div, #numsPile div {
float: left;
width: 60px;
height: 60px;
padding-top: 10px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
border-radius: 100%;
}
#numsSlot div:first-child, #numsPile div:first-child {
}
#numsSlot div.hovered {
background: #aaa
}
#numsSlot div {
border-style: dashed;
font-size: 12px;
margin-bottom: 10px;
}
#numsPile div {
background: #666;
color: #fff;
font-size: 15px;
/*text-shadow: 0 0 3px #000;*/
box-shadow: 0 0 3px #000;
margin-bottom: 10px
}
#numsPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 0.5 m rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, .8);
box-shadow: 0 0 0.5em rgba(0, 0, 0, .8)
}
#card1.matching {
background: purple
}
#card2.matching {
background: blue
}
#card3.matching {
background: orange
}
#card4.matching {
background: indigo
}
#card5.matching {
background: red
}
#card6.matching {
background: cyan
}
#card7.matching {
background: violet
}
#card8.matching {
background: green
}
#card9.matching {
background: brown
}
#card10.matching {
background: red
}
#msgWhenTaskDone {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); /*for firefox*/
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); /*for safari & chrome*/
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div id="NumsMain">
<div id="numsPile"></div>
<div id="numsSlot"></div>
<div id="msgWhenTaskDone">
<h3>You have successfully completed this task!</h3>
<button onclick="restart()">Want to Play Again?</button>
</div>
</div>