System Drag and Drop - Java Script

System drag and drop is what you probably do on a daily basis when using your Windows,Macintosh, or other graphical operation system: You drag something from one area of the screen and drop it somewhere else.To delete a file, you drag it to the trash (Macintosh) or the recycle bin (Windows);to move a file fro one folder to another, you just drag the file from where it is and drop it into its new home. System drag and drop works because it has help from the operating system to complete its task. Currently, only one Web browser on one platform supports system drag and drop in Web pages,and that is Internet Explorer on Windows(although Mozilla supports it in XUL-based pages).

A system drag and drop can move in between windows and frames because the drag action is handled by the operating system.You can drag an image from a Web browser onto your desktop or into another browser. When you drag it onto your desktop, you download the image; when you drag it into another browser, the browser displays the image.The communication between the browser and the desktop (or other browser) is handled by the operating system.

In Internet Explorer version 4.0, only two items on a Web page could initiate a system drag: an image or some text.When dragging an image, you just simply held the mouse button down and then moved it; with text,you first highlighted some text and then you could drag it the same way as you would drag an image.In IE 4.0, the only valid drop target was a text box.

In version 5.0,Internet Explorer extended its drag-and-drop capabilities by adding new events and allowing nearly anything on a Web page to become a drop target. Version 5.5 went a little bit further by allowing nearly anything to become draggable (IE 6.0 supports this functionality as well).

Drag-and-drop events

The drag-and-drop events Microsoft added to Internet Explorer enable you to control nearly every aspect of a system drag-and-drop operation.The tricky part is determining where each event is fired: Some fire on the dragged item; others fire on the drop target.

Dragged item events

When an item is dragged, the following events fire (in this order):

  1. dragstart
  2. drag
  3. dragend

At the moment you hold a mouse button down and begin to move the mouse,the dragstart event fires on the item that is being dragged. By default, this event fires on an image or text selection being dragged. The cursor changes to the no-drop symbol(a circle with a line through it) indicating that the item cannot be dropped on itself. You can use the ondragstart event handler to run JavaScript code as the dragging begins.

After the dragstart event fires,the drag event fires and continues firing so long as the object is beingdragged. You can think of this event as similar to mousemove (which also fires repeatedly as the mouse is moved). When the dragging stops (because you drop the item onto either a valid or invalid drop target) the dragend event fires.

The following example shows how to use the ondragstart, ondrag, and ondragend event handlers:

This example assigns ondragstart, ondrag, and ondragend event handlers to an image. When you drag the image, the following text box displays the events each time one occurs.You end up seeing something like this in the text box:

dragstart drag drag drag drag drag drag dragend

Play around with this example for a while until you get the hang of these events.

Drop Target Events

When an item is dragged over a valid drop target, the dragenter event (similar to the mouseover event) fires.Immediately after the dragenter event fires, the dragover event fires and continues to fire as the item is being dragged within the boundaries of the drop target. When the item is dragged outside of the drop target,dragover stops firing and the dragleave event is fired (similar to mouseout).If the dragged item is actually dropped on the target, the drop event fires instead of dragleave.

This example explores the drop target events:

The previous example provides two text boxes to work with the events and one to announce the events as they occur. When you drag the text from the text box on the left to the one on the right, the <textarea/> fills up with events as they fire. If you drag the text over the text box and then drag it back out,you see events like this:

Otherwise,if you drop the text into the second text box, you see something like this:

Notethat when you drop the text into the second text box, the highlighted text actually moves into it.

Using all drag-and-drop events

The tricky part of handling system drag and drop is understanding the relationship between the dragged item events and the drop target events.Generally speaking,the dragged item events always fire first,except in the case of the drop event, which fires before dragend. The following example allows you to explore the relationship between these sets of events:

As you can tell, this example combines the functionality of the previous two examples, monitoring both the dragged item events and the drop target events. When you drag text into the right text box from the left, you see an event listing like this:

Note that because you start dragging away from the drop target, only the dragged item events fire initially. When you drag the text over the drop target, the dragenter event fires,followed by drag and then dragover. These two events fires repeatedly while you are still dragging over the drop target. When you drop onto the target, the drop event fires and is immediately followed by dragend. This completes the drag and drop sequence.

If you don’t drop onto the target, you see a series of events more like this:

In this case, you dragged the text over the right text box, and then dragged it back out, so the dragleave event fires, followed by the drag event. When you finally stop dragging the text, the dragend event fires.

By default, text boxes (<input/> or <textarea/>) are the only valid drop targets on a Web page, although it is possible to create a drop target from any item by altering the behavior of the dragover and dragenter events.

Creating your own drop target

When you try to drag some text (or an image) over an invalid drop target, you see a special cursor (a circle with a line through it) indicating that you cannot drop. Even though all elements support the drop target events, by default,their behavior is to not allow dropping. For example:

In this example, all the dragged item events fire, but no drop target event fires when you drag the text over the red <div/>. In order to turn the <div/> into a valid drop target, you must override the default behavior of dragenter and dragover. Because this is IE-specific, you can just set the oEvent.returnValue attribute to false:

In this example, when you drag the text over the red <div/>, the cursor changes to a pointer with a plus sign next to it, indicating that this is a valid drop target.By default, the dragenter and dragover events for the <div/> don’t allow dropping, so if you prevent the default behavior you allow the <div/> to become a drop target. After dragenter and dragover are fired, dragleave and drop are also enabled.

The dataTransfer object

Simply dragging and dropping isn’t of any use unless data is actually being affected.To aid in the transmission of data via drag and drop,Internet Explorer 5.0 introduced the dataTransfer object, whichexists as a property of event and is used to transfer string data from the dragged item to the drop target(the dataTransfer object is still used in IE 6.0).

Because it is a property of event,the dataTransfer object doesn’t exist except within the scope of an event handler, specifically,an event handler for a drag-and-drop event. Within an event handler, you can use the object’s properties and methods to work with your drag-and-drop functionality.


The dataTransfer object has two methods: getData() and setData().As you might expect, getData() is capable of retrieving a value stored by setData().Two types of data can be set: plain text and URLs. The first argument for setData(),and the only argument of getData(),is a string indicating which type of data is being set, either “text” or “URL”. For example:

It should be noted that two spaces can be used to store data: one for text and one for a URL. If you make repeated calls to setData(), you are always overwriting the data stored in the space specified.

The data stored in the dataTransfer object is only available up until the drop event.If you do not retrieve the data in the ondrop event handler, the dataTransfer object is destroyed and the data is lost.

When you drag text from a text box, the operating system calls setData() and stores the dragged text in the “text” format.It is possible to retrieve this value when it is dropped on a target. Consider the following example:

Try dragging the text from the textbox to the red square.
It will show you the selected text when dropped.

This is essentially the same as the last example,with the exception that the call to the dataTransfer.getData() method retrieves the text that was being dragged.When you drop that text onto the red <div/>, this example pops up an alert displaying the text you were dragging.

You may be wondering, what would happen if you used getData() with the argument “URL” instead of “text”? In this example, it would return a null value because the data is stored as text and,therefore, must be retrieved as text.

If instead you were to drag a link onto the red <div/>, you could use getData() with the “URL” format to retrieve the link:

When you begin dragging a link, the browser calls setData() and stores the href attribute as a URL. Using getData() and asking for the URL format, you can retrieve this value. So what is really the difference between the text and URL format?

When you specify data to be stored as text, it gets no special treatment whatsoever.In a manner of speaking,“it’s just dumb text.” When you specify data to be stored as a URL, however, it is treated just like a link on a Web page, meaning that if you drop it onto another browser window, the browser will navigate to that URL. This is discussed further later on.

dropEffect and effectAllowed

The dataTransfer object can be used to do more than simply transport data to and fro; it can also be used to determine what type of actions can be done with the dragged item and the drop target.You accomplish this by using two properties: dropEffect and effectAllowed.

The dropEffect property is set on the drop target to determine which type of drop behavior is allowed. These are four possible values:

  • “none” — A dragged item cannot be dropped here. This is the default value for everything but text boxes.
  • “move” — Indicates that the dragged item should be moved to the drop target.
  • “copy” — Indicates that the dragged item should be copied to the drop target.
  • “link” — Indicates that the drop target will navigate to the dragged item (but only if it is a URL).

Each of these values causes a different cursor to be displayed when an item is dragged over the drop target. It is up to you, however, to actually cause the actions indicated by the cursor.In other words, nothing is automatically moved, copied, or linked without your direction intervention.The only thing you get for free is the cursor change. In order to use the dropEffect property, it must be set in the ondragenter event handler for the drop target.

The dropEffect property is useless unless you also set the effectAllowed property on the dragged item. This property indicates which dropEffect is allowed for the dragged item. The possible values are the following:

  • “uninitialized” — No action has been set for the dragged item.
  • “none” — No action is allowed on the dragged item.
  • “copy” — Only dropEffect “copy” is allowed.
  • “link” — Only dropEffect “link” is allowed.
  • “move” — Only dropEffect “move” is allowed.
  • “copyLink” — dropEffects “copy” and “link” are allowed.
  • “copyMove” — dropEffects “copy” and “move” are allowed.
  • “linkMove” — dropEffects “link” and “move” are allowed.
  • “all” — All dropEffects are allowed.

This property must be set inside the ondragstart event handler.

Suppose you want to allow a user to move text from a text box into a <div/>. You must set both dropEffect and effectAllowed to “move”.But alas, the text won’t automatically move itself because the default behavior for the drop event on a <div/> is to do nothing.If you override the default behavior, the text is automatically removed from the text box. It is then up to you to insert it into the <div/>using the innerHTML property:

In this example, you can drag text from the text box and drop it onto the red <div/>.The text is removed from the text box because the default behavior of the drop event is overridden.The text is then inserted into the <div/> by using the innerHTML property. If you were to change dropEffect and effectAllowed to “copy”,the text in the text box would remain and would be duplicated in the <div/>.

The dragDrop() method

You already know how to create your own drop targets, so now it’s time to learn about creating your own draggable items. In IE 5.5, the dragDrop() method can be applied to almost any HTML element.You can initiate a system drag event by calling dragDrop() and,therefore, allow normally undraggable items to fire dragstart,drag, and dragend events.

The trick is to call dragDrop() at the correct time.To do this, it is best to use the onmousemove event handler to initiate the drag, like this:

By using the event.button property, you’re making sure that the left mouse button is down while the mouse is moving,which is typically when an object begins to be dragged. The next step is to use the dataTransfer object in the element’s ondragstart event handler to determine the action of the dragged item. For example,you could make a <div/> that,when dragged into a text box, inserts text:

When you drag the red <div/> in this example, the text “This is a red square” is set to the dataTransfer object.So if you drop the square into the text box,that text is instantly inserted as if it had been dragged from another text box. You could even drag the red <div/> into another browser window’s text box and the same thing would occur.

If you choose to store a URL instead of just text, it’s possible to drag the red square into another browser window and have the browser navigate to the page specified:

In this example, dragging the red <div/> into another browser window causes the browser to navigate to the Wrox home page,

Advantages and disadvantages

Obviously,system drag and drop in Internet Explorer is a very powerful piece of functionality, enabling you to tap into what is truly an operating-system function. The power to drag information across frames, as well as across browser windows, opens up a whole new world of possibilities for JavaScript developers. You must, however, be using Internet Explorer 5.0 or higher on Windows.

If you need to develop a drag-and-drop solution that works across multiple browsers, then system drag and drop is not the way to go. Despite the fact that this solution is so easy to use, no other browsers have made any moves to include such functionality, and that is not likely to change anytime in the near future. For those who only develop for Internet Explorer, this solution works pretty well; for others, the answer is to simulate drag-and-drop functionality.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Java Script Topics