| home / programming / javascript / dragdropie |   [previous] |
|
|
|
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.
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.
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.
| home / programming / javascript / dragdropie | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: October 23, 2002
Revised: October 23, 2002
URL: http://webreference.com/programming/javascript/dragdropie/3.html
