Drag and Drop in Internet Explorer

The dragDrop() Method

In IE 5.5 for Windows only (sorry Mac and Unix), the dragDrop() method was added as a method on nearly all HTML elements. This method is the only one that has to do with drag and drop behavior. While I believe that this is possibly the most misnamed method in our repertoire, it is very useful.

This method makes any element act like an image being dragged, which means that the ondragstart, ondrag, and ondragend events are fired in their appropriate order. (These events will not fire unless dragDrop() is called .) The problem, of course, is when to call the dragDrop() method in order to accurately mimic dragging an image or text. This is what we will explore now.

When you think about dragging something on the screen, you think about moving the cursor over it, pressing the mouse button down, and then moving the mouse again. The dragging doesn't actually start until the cursor is moved, which is our hint: we can use the onmousemove event to begin a drag.

The onmousemove event fires continuously as the cursor moves over the element, which obviously isn't what we want. We care only if the cursor moves and the left mouse button is down. We can check the status of the mouse button by using event.button and checking to see if it's equal to 1 (which indicates that the left button is down). So, our onmousemove event handler should look like this (note that DraggableElement should be replaced by a reference to a real element):

function handleMouseMove() { if (window.event.button == 1) { DraggableElement.dragDrop(); } }

The other necessary step is to add an ondragstart event handler that sets data to the dataTransfer object (otherwise, there is no data to get when it's dropped). This function would look something like this:

function handleDragStart() { window.event.dataTransfer.setData("text", "Text to send") }

Employing these methods, I have constructed another example. This one has a textbox to drag text from as well as a blue DIV that can be dragged as well. Just for fun, I also added some color change for the target DIV when something is dragged over it.

Conclusion

IE's built-in drag and drop functionality is very powerful, if not cool. It offers a wide range of possibilities for Web developers, whether they be working on Web sites or Web applications. When you consider that things can be dragged across frames, and even into other browser windows, developers can improve the usability of Web interfaces dramatically. The only real downside is the techniques discuessed here only work in IE, so before throwing this into your project, be sure to plan strategies for other browsers.

About the Author

Nicholas C. Zakas is a user interface designer for Web applications at MatrixOne, Inc. in Massachusetts. Nicholas works primarily as a client-side developer using JavaScript, DHTML, XML and XSLT. He can be reached via e-mail at nicholas@nczonline.net or at his Web site, http://www.nczonline.net.