HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 9

Drag and Drop

Drag and drop has been a common paradigm in user interface design for decades. What is less known is that drag and drop has been supported by web browsers for well over a decade and first appeared in IE5 in 1999.

The implementation of drag and drop that has been standardized in HTML5 is largely the same version from IE5. Where possible, HTML5 standards are based on existing implementations. This is both a strength and a weakness of HTML5. A drag and drop standard developed from the ground up would have significantly improved and streamlined the API outline in this lesson, but it would have taken longer for browsers to adopt.

Drag and drop is a technique allowing elements to be dragged from their original location on the screen, and dropped in a different area of the screen. Drag and drop follows the following process:

• The drag processes begins with a mouse down event. This selects the element that will be the source of the event.
• While holding the mouse button down, the user can move the element around the screen with his or her mouse.
• The process ends when the user releases the mouse button. The element that the mouse is over at the time becomes the target of the drag-and-drop event.

Drag and drop can therefore be seen as an approach for connecting two different elements that are related in some way.

Note

Before beginning, it is worth mentioning that this lesson will use simple JavaScript. Although this should be easy to follow if you have some ...