Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99293 Viewers
56 Video lessons · 112558 Viewers
71 Video lessons · 81370 Viewers
131 Video lessons · 39067 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.