You have already played around with the drag feature of jqueryui in the Mr. Potato Head lesson. This lesson features ‘drop’ functionality as well; ie. the ability to make something happen when one element such as a picture is dragged and ‘dropped’ onto another element.
This lesson will most likely have lots of detail and explanations in the future but, for now, it’s more of an exploration and a chance for you to tinker.
Visit free.mynmi.net and download dropDemo.zip. Unzip the file, open drop.html in your browser and play around by dragging pictures to the ‘drop here’ div tag. Three of the pictures spark an audio file that says “wrong” while also changing the text that says drop here to Wrong!!. The ‘wrong’ pictures also skitter off to the right to make way for the next pictures.
The ‘right’ picture says ‘correct’, becomes partially transparent and also sparks an animation.
At this point your job is to use brackets to figure out how all of this takes place and to make some creative changes. The dropDemo folder contains images and audio files but the keys to this mystery live inside func.js, style.css, and drop.html.
One easy thing that you can do is add your own audio files to the folder and, inside of func.js, call your mp3 files instead of mine. Func.js is heavily commented so you should also be make changes that alter what happens to those pictures once they are dropped, the animation that is sparked on a correct drag, etc. And more. Have fun!
Finally, if you want to use drag and drop functionality for your Jukebox project later on, I suggest that you download and take a look at dragsong.zip at http://free.mynmi.net.