JQuery Game: Pin The Tail On The Donkey

"Pin the Tail On the Donkey" is a popular children's party game in which participants are given a tail to attach to a picture of a tailess donkey while blindfolded. This jQuery version of the game demonstrates a jQuery plugin called Draggable.

Step 1: Set Up jQuery

Download and install jQuery or provide a link to the external script if you have not already done so (see instructions on the Home page).

Step 2: Download and Install the Plugin

Download the Draggable plugin from http://code.jquery.com/ui/1.11.2/jquery-ui.js and place in "scripts" folder. Alternatively, I have chosen to link the file off-site. Either way, the script link should be placed AFTER the main jQuery plugin:

		
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   </body>
		
	

Step 4: Link the Special CSS

Download or link the custom CSS from http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css and place in "styles" folder (if downloading). Again, I have chosen to link the file externally:

		
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
		
	

Step 5: Draggable Images

Place each draggable image in a DIV and give each image DIV a unique ID name such as "draggable01", "draggable02", etc.

		
   <div id="draggable01">
   <img src="images/tail.png">
   </div>
		
	

Step 6: Script for Draggable

In order for the Draggable to work, an additional jQuery script is required. Copy and paste script for each additional Draggable image and replace "draggable01" with the appropriate ID name. The script should be placed after the plugin link by either copying and pasting directly or on a separate .js file in the "scripts" folder and placing a script link in the spot mentioned.

		
   <script>
   $(function() {
   $( "#draggable01" ).draggable();
   });
   </script>