Assignment #9 - Drag and Drop

Objectives

1. To use Javascript and HTML 5 to implement a drag and drop interface

Assignment

For this assignment you will need a deck of cards. You can find a public domain set of cards at http://code.google.com/p/vector-playing-cards/ (there are others available if you want to use a different one). 

I would recommend putting the cards in a folder and name them with a sequential name such as S1.jpg - S13.jpg (Ace through K of Spades), C1-C13, H1-H13, D1-D13. This will make it really easy to access the images. If you wish to share the images with other students - feel free. I also demonstrate in the lectures techniques to display a partial image of a large image - this technique can also be used for this assignment.

For the next step you deal cards to the screen - I recommend a button titled "Deal" that deals all the cards at once - but the way you choose to do this is up to you. Bottom line is you need to have an interface to deal cards to the screen, and you must deal the cards when the user uses the interface. (See lecture Dealing a Deck of Cards in Javascript ). If you choose to deal cards from a standard deck of cards - you will need to ensure the same card is not dealt twice.

Here is the drag/drop part - the player should be able to discard (get rid of cards). They will do this BY DRAGGING THE CARDS to either the deck, or dealer, or some other location on the screen that visually indicates it is the discard pile (no mystery discards) when the player drags a card to discard it. When a card is discarded you may choose to deal a new card or not.

That's it. - once complete, congratulate yourself - you have the beginnings of an online poker game. You can work on this in jsfiddle - but you must have it working on your web site in the final submission. You may have questions - please post them to the bulletin board - and feel free to answer the questions of other students.

Here are some cards for you.

If you want to have some fun with this - I have 2 Flash games I wrote that are available at http://www.iseecards.com/pyramath/game/SpeedPyramath.html and http://www.iseecards.com/fractazmic/game/fractazmic_speed.html - I have posted the card images I created for these if you would like to use them for this assignment. Any game you create that demonstrates the drag and drop and some logic rules will be accepted for this assignment.

FractazmicCards.zip

PyramathCards.zip

Here are some more card images you can use - I See Cards Images. If you would like to see the I See Cards game in Javascript - it is at http://jsfiddle.net/reaglin/Pts4h/ 

Bottom line: Show me your ability to (1) create an image, and (2) drag it to another location and (3) trigger an event that you capture (you need to be sure you make sure you let me know you have triggered the event somehow) - and that is the assignment.

Information

There are lots of web resources on this, and my lectures cover this extensively.

Estimated Completion Time

This took me about an hour from scratch. You can use some of the code I have posted in the lectures to make this a bit easier.

Supporting Lectures 

After watching the jQuery lectures - everything you need to complete this is in these 2 lectures:

You will definitely want this lecture Lecture - Dealing a Deck of Cards in Javascript

Also very useful will be Lecture - Drag and Drop in Javascript

I used jQueryUI to support the drag and drop. You can also use this or some other toolset (like MooTools). You are free to work from my JSFiddle at http://jsfiddle.net/reaglin/LEHbc/ - if you use my JSFiddle, please use the Fork to create it under your own account. Remember - you must have your example working on your own site, not just on JSFiddle. I also recommend you using your own images on your own site (not mine).

Questions and Answers

External Resources

Drag and Drop Tutorial - http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ 

Grading Criteria

The grading is pretty simple - once I load your web page I will attempt to deal a card, and I will attempt to drag a card to a target to remove the card.

Place an image on screen - 3 points  (show a card)

Drag the image to another spot - 3 points (allow the card to be dragged)

Trigger a drop event  - 4 points (show an alert or state what card was dropped)