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
The Rock, Paper, Scissors application uses a small amount of CSS3 for some very effective effects. First of all, let's just take a look at some of the basic formatting that's done and you'll notice here in the RPS.html I'm just going to scroll quickly all the way down to the bottom. We have this outer div called columns and here in rps.css we use that for its descendent selectors, so the div that are inside of columns and the footer that inside of columns get these formats and this is really quite simple.
Each of the divs has a margin right of 20 pixels and it has a white solid border and so if we look at this in the browser you see that by having them float left they create columns. You see they have 20 pixels in between and that's the right margin and you notice that their footers are formatted with this bold font, and the white border of course you cannot see because it against a white background. But this sets it up for some of the magic that happens later. You'll also notice we have these transitions. Because this is CSS3 and it's not a finalized yet, we have these temporary selectors, that -webKit, -moz, -O.
-webKit works for Google Chrome and also for Apple Safari, -moz works for Mozilla Firefox and -O works for Opera, which doesn't support HTML5 drag and drop anyway. But we've included it here just so it's there for the future. And so by setting these transitions to transform with a .2 second ease out, when I set the class to moving, these things will happen with an animated effect. And so what is this? It's scaling by 80% and it's setting the opacity to a quarter.
So by invoking that selector, this transformation happens with a .2 second ease out and these are the things that are changes. It changes the scale and it changes the opacity. It's when I grab that that's what happens and it happens with nice cool animation. And likewise when I go and do the swap or even just drop it, that animation happens coming back and that happens in the dragEnd. The class name get set to undefined and when that happens, then this moving is no longer in effect and the default size and the default opacity comes back into effect and these transformations happen with the .2 seconds and so we get the nice bounce-back occurs.
So this demonstrates nicely just how much mileage you can get out of a few simple CSS effects. This simple Rock, Paper, Scissors application is a good example of how you can implement the HTML5 drag and drop with a few simple effects to create a compelling application. Again, feel free to use this code as a starting point for your own applications.