Join Bill Weinman for an in-depth discussion in this video Understanding HTML5 drag and drop, part of HTML5: Drag and Drop in Depth.
- View Offline
The HTML5 drag-and-drop API is a set of DOM events, that's Document Object model events, that are based upon an early implementation in Internet Explorer. As I record this, the specification is fairly complete, but inconsistently implemented across browsers. It is supported by Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Internet Explorer, although the implementations are inconsistent and it does not run on any mobile devices that I know of and it is not supported by the current version of Opera.
The API for HTML5 drag and drop is event-based. That means that your drag-and-drop code will run when events are fired in the browser. For example, when a drag begins, the drag start event is fired and if you have a function registered as an event listener for that event it will run when that event is fired. So the first thing you must do is register your events. Events are registered using the addEventListener method and keep in mind that some events may be fired repeatedly.
For example, the dragOver event may fire many times per second well an object is held over a drop zone. A dropzone attribute may be used to specify a dropzone and to receive data from the drop event. Alternately you may simply intercept dragenter and dragover events and while this does not receive a payload from the drop it is, as it turns out, far more flexible for many applications and this is the method that I've used in the example for this course. Keep in mind that all of this is inconsistently implemented across browsers, so you'll need to test your code thoroughly on all the browsers that you plan to support and at least in the near future expect it to change with each browser release.
The HTML5 drag-and-drop API is a rich interface for handling drag-and-drop events. While it is inconsistently implemented, you'll see that it is possible to write an application that works acceptably across the various browsers that implement the API.
- 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