Join Bill Weinman for an in-depth discussion in this video Creating a simple game, part of HTML5: Drag and Drop in Depth.
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.…
- 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