Inside Technique : Adding Drag and Drop
By Scott Isaacs

Using Internet Explorer 4.0 with Dynamic HTML and CSS-Positioning, you can add greater interactivity to your web-page. This short article provides a framework for quickly and easily adding drag-drop code to your web page. This builds upon the code from the Killer Drag Drop^IE4 technique. In this article, we build a framework that:

• Enables any absolute positioned element to be dragged
• Allows any element to be specified as a drop target
• Adds custom events to the drag source and the drop target

Before you begin, please review the following terminology:

CSS-P

This refers to the W3C CSS-Positioning Working Draft that is fully supported in Internet Explorer 4. This draft allows you define the absolute position on the element in the page.

Drag Source

This is the element that is being dragged by the user.

Drop Target

This is the target element when the user completes a drag operation. The dragged element must be fully contained within the drop target for the drop target to accept the operation.

On the next page is a demonstration of the framework.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.