Drag and Drop Events
Example 17-2 showed how to respond to mouse drags within an application. It is possible to use techniques like that to allow elements to be dragged and “dropped” within a web page, but true “drag-and-drop” is something else. Drag-and-drop (or DnD) is a user interface for transferring data between a “drag source” and “drop target” that may be in the same application or in different applications. DnD is a complex human/computer interaction, and APIs for implementing DnD are always complicated:
They have to tie into the underlying OS so that they can work between unrelated applications.
They must accommodate “move”, “copy”, and “link” data-transfer operations, allow the drag source and drop target to restrict the set of allowed operations, and then allow the user to choose (usually using keyboard modifiers) among the permitted set.
They must provide a way for a drag source to specify the icon or image to be dragged.
They must provide event-based notification to both the drag source and the drop target of the progress of the DnD interaction.
Microsoft introduced a DnD API into early versions of IE. It was not a well-designed or well-documented API, but other browsers have attempted to replicate it, and HTML5 standardizes something like the IE API and then adds new features that make the API much easier to use. This new easy-to-use DnD API is not implemented at the time of this writing, so this section covers the IE API, as blessed by the HTML5 standard.
The IE DnD API ...
Get JavaScript: The Definitive Guide, 6th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
