Join Bill Weinman for an in-depth discussion in this video Exploring a sample drag-and-drop application, part of HTML5: Drag and Drop in Depth.
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.…
- 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