Professional JavaScript For Web Developers

Drag and Drop
position: absolute;
left: 300px;
}
Try dragging the red square onto the blue square.
As you can see, the JavaScript section of this code is markedly smaller than that of the example in the
previous section. The first two lines of JavaScript create the zDraggable and zDropTarget objects.
Then, the drop target is registered to the zDraggable object by using addDropTarget(). Finally, an
event handler for the drop 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.
Remember, the relatedTarget property of the event object is equal to the draggable element when
used in a drop event.
Of course, all this code must be called after the page has been loaded, so the onload event handler is
used for that purpose.
Summary
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 provided
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-anddrop
example.
Lastly, you were introduced to the zDragDrop library, a free JavaScript library that encapsulates a great
deal of simulated drag-and-drop functionality. Using this library, you learned how to create a drag-anddrop
example making use of the custom objects, methods, and events.
409