HTML5: Drag and Drop in Depth

with Bill Weinman
please wait ...
HTML5: Drag and Drop in Depth
Video duration: 0s 1h 0m Intermediate


Join Bill Weinman as he shows how to make just about any web page element draggable with a combination of JavaScript and HTML5, a technique that has increased browser support and that eliminates the need for external libraries such as jQuery. The course covers how to detect drag-and-drop support in the user's browser, code a simple event listener, use a drop zone, and even receive dropped objects without a drop zone. A simple working example game, a practical implementation of drag-and-drop that can be applied to almost any web site, is also demonstrated.

Topics include:
  • Exploring the HTML/Javascript/CSS/DOM relationship
  • 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
Developer Web


- [Voiceover] Hi, I'm Bill Weinman and I'd like to welcome you to HTML5 Drag and Drop in Depth. In this course we'll look at the HTML5 Drag and Drop application programming interface including how to write and register event listeners, how each of the drag and drop events work and how to use drop zones. I'll also show you a complete working application that uses the HTML5 Drag and Drop API to build a simple game demonstrating real world usage of the drag and drop event model and putting your knowledge to work.

The HTML5 Drag and Drop API provides a unified interface so that you can create applications that use drag and drop in any standards compliant browser. Learn how to use this new technology in HTML5 Drag and Drop in Depth.

please wait ...