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


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.

There are currently no FAQs about HTML5: Drag and Drop in Depth.

please wait ...