Inside Technique : Adding Drag and Drop : Using the Framework

Internet Explorer 4.0 with Dynamic HTML allows powerful, generic code to be written. Rather than writing custom code for every drag-drop operation, the Drag-Drop Framework provides you with a declarative way to add drag-drop to your page. For example, let's examine how the letter "I" was turned into a drag-source (an element that can be dragged by the user).

 <DIV STYLE="position: absolute; top: 2em; left: 8.5em; width: .8em; height: .8em; 
                cursor: hand; background: lightgreen; color: navy; text-align: center;"
         dragEnabled 
         dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
    I
 </DIV>    

The in-line style is defining the original position of the element and providing its formatting. The style can be defined in-line or in the global style sheet. Two new attributes are included on the DIV, dragEnabled, and dropTarget. These are not standard HTML attributes, but rather custom attributes that the drag-drop code knows to look for. dragEnabled tells the code that this element can be drag-source, and dropTargets list the ID's of elements that the element can be dropped onto. Let's look at the drop-target, dropHere:

 <DIV ID=dropHere 
         STYLE="position: absolute; top: 5em; left:9em; width: 1.5em; height: 1.5em; 
                border: 1pt black solid; z-index: -1; background: yellow" 
         onOverTarget="doOverTarget()" 
         onOutTarget="doOutTarget()" 
         onDropTarget="TestLetter('I')">
  </DIV>

To be a drop-target, you just need to supply an ID on the element (and it does not have to be positioned, it can be an element in the flow of your document). This drop-target also supports a number of events that are fired when a drag-source is entering and leaving the element. Next is a complete reference of all the new HTML attributes. properties, and events defined by this framework.

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