Drag-and-drop

Although creating drag-and-drop functionality manually is not a very challenging ordeal, HTML5 takes drag-and-drop to a whole new level. With the new API, we're given the ability to do so much more than just let the browser handle the dragging and dropping actions. The interface allows for customizing the exact way that things are dragged, how the dragging action looks, what data is carried with the draggable object, and so on. Plus, not having to worry about how the low level events are tracked in different platforms and devices is a nice, welcome touch.

For the curious reader, the way we could implement our own drag-and-drop behavior is really quite simple; first, we listen for a mouse down event on the element we want to drag. When that happens, we set a mouse down flag, which we unset once the mouse up event is fired, whether on the element we wish to drag or not. Next, we listen for a mouse movement event, where we check if the mouse is down. If the mouse is moving while...