How to reset the draggable elements. And also attached zip files. Without reset it is working fine. Below is code :-
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<style>
#content
{
margin: 80px 70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#dvSource, #dvDrop
{
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
#dvSource img, #dvDrop div
{
float: left;
width: 58px;
height: 78px;
padding: 0px;
padding-top: 0px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
}
#successMessage
{
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);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
</style>
<script>
$(init);
var correctCards = 0;
function init()
{
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css
(
{
left: '580px',
top: '250px',
width: 0,
height: 0
}
);
// Reset the game
correctCards = 0;
$("#dvSource").html();
$("#dvDrop").html();
$("#dvSource img").draggable
(
{
containment: '#content',
stack: '#dvSource img',
cursor: 'move',
revert: true
}
)
$("#dvDrop div").droppable
(
{
accept: '#dvSource img', //We use the accept option with the selector "#cardPile div" to ensure that the slot will only accept our number cards, and not any other draggable element.
hoverClass: 'hovered', //The hoverClass option adds a CSS class to a droppable when a draggable is hovered over it — we use this option to add a class of 'hovered' to the element, which we'll highlight using CSS.
drop: handleCardDrop
}
)
}
function handleCardDrop( event, ui )
{
var DropId = $(this).attr( 'id' ); // output - Drop_1
var DragId = ui.draggable.attr( 'id' );// output - Drag_1
var aDrop = parseInt(DropId.slice(5)); // output - 1
var bDrag = DragId.slice(5);// output - 1
//alert(bDrag)
if ( aDrop == bDrag )
{
//ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );// this line decrease opacity and disable.
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false ); // this line drop the element.
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 8 )
{
$('#successMessage').show();
$('#successMessage').animate
(
{
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
}
);
}
}
</script>
<img alt="" id="Drag_1" src="images/Chrysanthemum.jpg" />
<img alt="" id="Drag_2" src="images/Desert.jpg" />
<img alt="" id="Drag_3" src="images/Hydrangeas.jpg" />
<img alt="" id="Drag_4" src="images/Jellyfish.jpg" />
<img alt="" id="Drag_5" src="images/Koala.jpg" />
<img alt="" id="Drag_6" src="images/Lighthouse.jpg" />
<img alt="" id="Drag_7" src="images/Penguins.jpg" />
<img alt="" id="Drag_8" src="images/Tulips.jpg" />
</div>
<hr/>
<div id="Drop_1">One</div>
<div id="Drop_2">Two</div>
<div id="Drop_3">Three</div>
<div id="Drop_4">Four</div>
<div id="Drop_5">Five</div>
<div id="Drop_6">Six</div>
<div id="Drop_7">Seven</div>
<div id="Drop_8">Eight</div>
</div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>
</body>
</html>