Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Detecting drag and drop support
- Using the HTML5 draggable and dropzone attributes and onDragStart event
- Exploring different events
- Receiving drops with or without a drop zone
- Creating a simple game
Skill Level Intermediate
Most common demonstrations of HTML5 drag and drop use some form of a shopping cart application. While this seems an obvious choice, I didn't find very many actual online shopping sites that are using HTML5 drag and drop for the shopping carts. So I decided instead to demonstrate this interface using a simple game. This seems to be a more common application for this technology. So here we have the simple game. It's called Rock, Paper, Scissors. It's a children's game. I played it when I was little and most of the people that I know played some form of it when there were little, and it works like this rock beats scissors, because a rock can crush scissors.
Scissors beats paper because paper can be cut by scissors and paper beats rock because well, something has to beat rock and paper covers a rock. And so the way this works, you'll notice there is a little status line up here and it says using HTML5 drag and drop and that's the results of the test to see whether HTML5 drag and drop is supported by this browser. If it is, it displays that message. This is a little status bar. And so when I pick up one of these items, I am going to grab the rock, you'll notice it says Drag Rock because I picked it up and it's in drag mode, and if I hover it over the paper you'll see it'll say Hover Rock over Paper, so it's a little status that gives us an idea of what events are being fired when.
If I let go over the rock over the paper, you'll remember that rock does not beat paper, paper beats rock, and so it says rock does not beat paper and if I drag the rock over the scissors, see now it says Hover Rock over Scissors and if I let it go it says Rock beats Scissors, and the rock and the scissors they swap places. The rock takes the place of the scissors because it won. And so the paper can beat a scissors-- Actually paper does not beat scissors. Paper beats rock and scissors beats paper, and so we see how the game goes.
We can also see it in each of these different browsers that I have loaded. Here's Internet Explorer. You'll notice that we don't get the same animations. We don't get some of those nice CSS3 effects like the image shrinking and the image being used, being dragged along with the cursor. These aren't supported in Internet Explorer, but the game works, as you can see, and so we get the same results and we get the little messages in the status bar there.
We get a pretty complete implementation in Firefox. You see we get the CSS3 effects and the game also works. Safari uses pretty much the same code for a lot of its browser as Google Chrome does. In fact, Google Chrome is based on the WebKit engine, which is mostly written by Apple for Safari. It's based originally on an open- source browser, but in any event we'll see that this works pretty much like Chrome does and Firefox as well.
Here is all the event handlers. We have handleDragStart, which handles the start of the drag event. We have handleDragEnd which handles the end of the dragging, handleDragOver, handleDragEnter, handleDragLeave. These are handlers for when an object is dragged over another object, and we have handleDrop, which handles the drop event itself, and ends up calling the function isWinner to determine which object wins the little contest there.
And then in our utility functions there is the isWinner function, which is very, very simple as you can see and that's really the whole logic of the game right there. And then there is getRPSFooter, getRPSImage, getRPSType and swapRPS. RPS stands for Rock, Paper, Scissors, and these are just functions for dealing with the various HTML elements and getting their DOM representations for different purposes within the code. We'll get to all of this in a lot more detail later on. There is the swapRPS, which swaps the images when somebody wins, and some simple utility functions and under App lifetime support we have the init function which tests the drag and drop, and you see here is our message, this browser does not support drag and drop, and up at the top here using HTML5 drag and drop for when you do have it available.
And then finally down at the bottom this is really all the HTML that's involved. All the formatting happens in CSS and so really this is all there is to it. So let's take a look at the CSS file real quickly. I am going to just go ahead and open and we'll go into the CSS folder and that's this rps.css. And again this is very, very simple. We have just our basic formatting up here and these are the CSS transitions.