Drag and Drop
<p>Try dragging the red square onto the blue square.</p>
Then, the drop target is registered to the
object by using
. Finally, an
event handler for the
event is added to the drop target. That event handler moves the draggable
element to the upper-left corner of the drop target by making use of the previously mentioned methods.
property of the
object is equal to the draggable element when
used in a
Of course, all this code must be called after the page has been loaded, so the
event handler is
used for that purpose.
This chapter introduced the concept of drag and drop in a Web browser and explained the difference
between system drag and drop and simulated drag and drop.
You learned about Internet Explorer’s built-in system drag-and-drop functionality, and that it is the only
browser that supports system drag and drop from Web pages. The various events and methods pro-
vided by IE to work with system drag and drop were also discussed, as well as strategies for dragging
text and links.
Next you learned about simulated drag and drop, a way to use the DOM to move elements around that
gives the appearance of drag-and-drop functionality. You were shown how to build a simple drag-and-
deal of simulated drag-and-drop functionality. Using this library, you learned how to create a drag-and-
drop example making use of the custom objects, methods, and events.
Drag and Drop
16_579088 ch13.qxd 3/28/05 11:41 AM Page 409