DRAG AND DROP PRACTICE GAME WITH IMAGE

Wednesday, 10 September 2014

DRAG AND DROP PRACTICE GAME WITH IMAGE

-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/card-games-with-drag-and-drop-with.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image_6.html
http://www.grammar-quizzes.com/wrcite1_book.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-with-image.html
-------------------------------------------------------------------------------------------------------------

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Drag and Drop</title>
<style type="text/css">
#drop {
width:200px;
height:150px;
margin:3px auto;
background:#eddaa8;
font-size:16px;
}
#drop.drp { background:#f1ef08; }
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
width:450px;
height:180px;
margin:12px auto;
border:1px solid silver;
font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
width:150px;
height:50px;
background:#07da08;
border:2px solid blue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
// sets the draggable and define its options
$('#drag .drg').draggable({
cursor: 'move', // sets the cursor apperance
revert: 'invalid', // makes the item to return if it isn't placed into droppable
revertDuration: 900, // duration while the item returns to its place
opacity: 0.35 // opacity while the element is dragged
});

// define options for droppable
$('#drop').droppable({
accept: 'img.drg', // accept only images with class 'drg'
activeClass: 'drp', // add class "drp" while an accepted item is dragged
drop: function(event, ui) {
// after the draggable is droped, hides it with a hide() effect
ui.draggable.hide(1000);
}
});

// when the "#sw" element (inside the "#drop") is clicked
// show the items with class "drg", contained in "#drag"
$('#drop #sw').click(function(){
$('#drag .drg').slideDown(1000);
});
});
</script>
</head>
<body>
<div id="drop">Drop here         <span id="sw">Show</span></div>
<div id="drag">
Drag these images:<br />
<img src="http://coursesweb.net/javascript/imgs/circle.gif" alt="circle" width="45" height="45" class="drg" />
<img src="http://coursesweb.net/javascript/imgs/triangle.gif" alt="triangle" width="65" height="55" class="drg" />
<img src="http://coursesweb.net/javascript/imgs/rhomb.gif" alt="rhomb" width="70" height="55" class="drg" />
<div class="drg">DIV with some content. Click and drag</div>
</div>
</body>
</html>