- 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
Now that we understand how HTML5 drag and drop works, let's take a look at a fully functioning application. As I was preparing to record this course, I noticed that many of the examples for learning and using HTML5 drag-and- drop focus on using it for shopping carts and similar applications. But there are very few actual web sites using a drag-and-drop interface for such applications. So I decided to do something different and this is what I came up with. It's a simple game.
It's a very common children's game and it just works like this. You grab one of these images, in this case the rock, and you drag it over another image and it status line says Hover Rock over Paper, Hover Rock over Scissors, and when you drop it, it checks to see which one beats which one and whether or not to swap the image. In this case, rock does beat scissors. And so when I let it go over the scissors it says Rock beats Scissors and it leaves the rock in the place of the scissors and moves the scissors as over to the place of the rock.
And so likewise the scissors beats the paper and the paper beats the rock. So it's a very simple game and you'll notice that it's using a lot of the features of drag and drop and even a little bit of CSS3 for some simple effects. You'll notice when I grab the rock, you see that the area under it shrinks in size and that's done with CSS3 and you'll also notice that it uses this hover image. No matter where my mouse grabs the image, it always puts the mouse button in the middle. It's using this hover image.
You notice as I roll over the scissors and the paper it gets this gray dashed line around it to help to indicate that I'm over that drop zone. So it's using a lot of very simple and modern techniques to make the game a little bit more user friendly. So we'll take a look at the code in a lot more detail in the next movie, but for now let's just get a quick overview of it. It's called RPS.html and you'll find it in your Chapter 3 exercise files. And RPS stands for Rock Paper Scissors. And it also uses the rps.css file and we'll look at that in a lot more detail later in this chapter.
So we have some variables defined at the top, including a associative array for what beats what. Rock gets beat by paper, paper gets beat by scissors, scissors gets beat by rock. It's indexed on the one that's hovering and so it will bring back what it is that wins. We have our little CSS for the hovering in normal, our DragAndDrop detector. We've looked at that previously in this course and here are the handlers. We have the DragStart handler.
We'll look at these in a lot more detail in the next movie, the DragStart handler, the DragEnd handler, the DragOver handler, the DragEnter handler, DragLeave, and the Drop handler which calls isWinner to decide whether or not to swap the image. And isWinner, there is the isWinner function. That call swapRPS if it finds a winner and swapRPS will actually swap the images. We have some utility functions for getting elements out of the div, because the div is the part that is dragged.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.