Drag and Drop with Microsoft Internet Explorer 5

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Drag and Drop with Microsoft Internet Explorer 5

Published on: Sunday 13th February 2000 By: Ryan Detert

• Introduction
• Dragging n' Dropping n' General
  • The New Explorer 5.0 Event Handlers
    • ondragstart (source event)
    • ondrag (source event)
    • ondragenter (target event)
    • ondragover (target event)
    • ondrop (target event)
    • ondragleave (target event)
    • ondragend (source event)
  • Transferring The Dragged Data
    • clearData()
    • effectAllowed
    • dropEffect
    • setData()
    • getData()
• Working Example Source Code
• Working Example
• Netscape 4.0 Dragging 'n Dropping

Introduction

As we have already seen in previous articles, scripting events can add a needed flair to your web pages without the hassle of using a plug-in. In this article, we will introduce you to you some of the brand-new Internet Explorer 5.0 specific drag-and-drop events.

Dragging n' Dropping n' General

In the Windows environment you have all used drag-and-drop operations, but maybe without realizing it. For example , if you click an icon on your desktop and hold the mouse button down and then move the cursor around the screen the icon will follow. This is known as dragging. When you release the mouse button this is known as dropping.

The New Explorer 5.0 Event Handlers

There are two terms associated with the drag-and-drop operation, source and target. So, if you were dragging a folder into the Recycle Bin, the folder would be the source and the Recycle Bin would be the target. Simple. All the events associated with drag-and-drop operations occur in a sequential manner, all the event handlers are listed below as sequentially as possible.

ondragstart (source event)

Fires on the source object when the user starts to drag a text selection or selected object. This is the FIRST event to fire when you begin dragging anything.

ondrag (source event)

Fires on the source object continuously while it is being dragged. It fires directly after the ondragstart event and will continue to fire until the ondragend event handler is triggered. To invoke the ondrag handler:

• Drag a text selection or object within the browser.
• Drag a text selection or object to another browser.
• Drag a text selection or object to a drop target in another application.
• Drag a text selection or object to the system desktop.

ondragenter (target event)

Fires when the source is dragged over a valid drop target object. The drop target may be in another browser window.

ondragover (target event)

Fires on the target element continuously while the user drags the object over a valid drop target.

ondrop (target event)

Fires on the target element when the user releases the mouse button over a valid drop target.

ondragleave (target event)

Fires if the user drags an object over a valid drop target and then out of the valid drop target.

ondragend (source event)

The final event to fire, it occurs when the user releases the mouse in a drag operation, regardless of whether the source element is over a valid drop target.

Transferring The Dragged Data

By using the window.event.dataTransfer object we can access pre-defined clipboard functionalities to assist us in our drag-and-drop operations. This makes it possible to customize our dragging and dropping.

clearData()

Removes one or more data formats from the clipboard by means of the dataTransfer object. The syntax for this method is: window.event.dataTransfer.clearData([dataFormat]), where dataFormat is optional and may have any of the following string values.

• Text -Removes text format
• URL -Removes URL format
• File -Removes file format
• HTML -Removes HTML format
• Image -Removes image format

If no format is specified then all data formats are cleared. (To override the default behavior of the target element, use this method in the ondrop handler.)

effectAllowed

Specifies the effects allowed on the source element by the drag-and-drop operation. The syntax is: window.event.dataTransfer.effectAllowed [= effect], where effect is a string specifying the type of effect. Here is a list of the effects:

• copy -Selection is copied.
• link -Selection is linked to the drop target by the data transfer operation.
• move -Selection is moved to the target location when dropped.
• copyLink -Selection is copied or linked, depending on target defaults.
• copyMove -Selection is copied or moved, depending on the target defaults.
• linkMove -Selection is linked or moved, depending on target defaults.
• all -All drop effects are supported.
• none -Dropping is disabled and the no-drop cursor is displayed.
• unitialized -no value has been set. The default effect will work but properties from this property cannot be queried.

dropEffect

Sets or retrieves the type of drag-and-drop operation and the cursor to display for the object. The syntax is: window.event.dataTransfer.dropEffect [= cursorStyle] where cursorStyle is a string that specifies the type of cursor displayed. Here is a list of possible cursor types:

• copy -Copy cursor displayed
• link -Link cursor displayed
• move -Move cursor displayed
• none -This is the default value if no cursor is specified. The default cursor displayed is the no-drop cursor which will look something like a circle with a slash through it. This property MUST be used with the effectAllowed property to function. Microsoft recommends adding dropeffect to the following event handlers as a technique for dropping text: ondragenter, ondragover, ondrop.

setData()

Assigns data in a specified format to the dataTransfer object. The syntax for this method is: window.event.dataTransfer.setData(sDataFormat, sData), where sDataFormat is a required string that specifies the format of the data to be transferred. It may either contain the value "Text" or "URL". The sData argument is another required string that specifies the data supplied by the source element. It may either be descriptive text or a URL of some sort. Do note that the sDataFormat and sData information must correspond.

The setData() method will return a boolean true if the operation was successful, otherwise it will return false.

getData()

Retrieves the data in the specified format from the clipboard through the dataTransfer object. The syntax for this method is: window.event.dataTransfer.getData(sDataFormat), where sDataFormat is required and is a string specifying either the data format value "Text" or "URL".

This method also enforces cross-frame security because it will fail if you try to transfer information between different security protocols or between two browsers with different security settings.

Working Example - Source Code

Based on the above descriptions of all the methods, and the following annotated code, you should be able to understand how dragging n' dropping in IE5 works:

<html>
<head>
<title>Shopping Anyone?</title>

<script language="JScript"><!--
// the object that you are dragging:
var srcObj = new Object;

// string to hold source of object being dragged:
var dummyObj;

function startDrag(){
    // get what is being dragged:
    srcObj = window.event.srcElement;

    // store the source of the object into a string acting as a dummy object so we don't ruin the original object:
    dummyObj = srcObj.outerHTML;

    // post the data for Windows:
    var dragData = window.event.dataTransfer;

    // set the type of data for the clipboard:
    dragData.setData('Text', window.event.srcElement.src);

    // allow only dragging that involves moving the object:
    dragData.effectAllowed = 'linkMove';

    // use the special 'move' cursor when dragging:
    dragData.dropEffect = 'move';
}

function enterDrag() {
    // allow target object to read clipboard:
    window.event.dataTransfer.getData('Text');
}

function endDrag() {
    // when done remove clipboard data
    window.event.dataTransfer.clearData();
}

function overDrag() {
    // tell onOverDrag handler not to do anything:
    window.event.returnValue = false;
}

function drop() {
    // eliminate default action of ondrop so we can customize:
    window.event.returnValue = false;

    // manually add new attributes:
    dummyObj = addAttribute(dummyObj, 'height="25" width="25" alt="' + srcObj.myLabel + '"');

    // add the picture below shopping cart:
    miniProductBar.innerHTML += dummyObj + '&nbsp;';

    // change shopping cart message:
    productBarStatus.innerHTML = '<b>' + srcObj.myLabel + '<\/b> has been added to the shopping cart.';
}

// since we aren't working with an actual object, we will add our attributes manually:
function addAttribute(oObj, sVal) {
    var loc = oObj.indexOf(">");
    return oObj.substring(0, loc) + ' ' + sVal + '>';
}
//--></script>

</head>

<body>

<!-----------------DRAG THESE IMAGES---------------------------->

<p align="right">
<img src="jsbible.gif" ondragstart="startDrag()" ondragend="endDrag()" myLabel="Java Script SuperBible" border="1">
<img src="dhtml.gif"   ondragstart="startDrag()" ondragend="endDrag()" myLabel="Dynamic HTML" border="1">
<img src="html.gif"    ondragstart="startDrag()" ondragend="endDrag()" myLabel="HTML 4 Super Bible" border="1"> 
</p>

<!--------------------------------------CART-------------------------------->

<img src="cart.jpg" id="cart" ondrop="drop()" ondragover="overDrag()" ondragenter="enterDrag()">

<!------------------------------------PRODUCT BAR STATUS-------------------->

<div id="productBarStatus" style="font-family:arial; font-size:9pt">Drag Items Into Shopping Cart. Works in IE 5.0 only.</div>

<!-------------------------------------MINI PRODUCT BAR--------------------->

<div id="miniProductBar" style="width:400px; height:100px;"></div>

</body>
</html>

Working Example

Try the IE5.0 Drag n' Drop Demo

Netscape 4.0 Dragging 'n Dropping

Netscape also has a type of drag-and-drop operation, though not nearly as robust as that of Explorer. The operation utilizes Windows' built in drag-and-drop mechanism. The onDragDrop event handler is used in conjunction with the window.captureEvents() method and will be triggered whenever any Windows system object is dragged into a Netscape browser window. However, there is a work-around for Netscape that allows you to create the same effect as in Explorer that utilizes layers and the mouse events that we have discussed in previous articles.

We may return at a future date with a full implementation for Netscape 4.0.

Feedback on 'Drag and Drop with Microsoft Internet Explorer 5'

• Drag and Drop with Microsoft Internet Explorer 5 - pawan meshram Thursday April 26, 2007 at 03:18:12
• Drag and Drop with Microsoft Internet Explorer 5 - chris November 11, 2002 at 07:14:52:
• Drag and Drop with Microsoft Internet Explorer 5 - Peter Fraterdeus January 26, 2002 at 19:06:18:
• Drag and Drop with Microsoft Internet Explorer 5 - Robert Reese January 17, 2002 at 14:36:42:
• Drag and Drop with Microsoft Internet Explorer 5 - Jireh September 12, 2001 at 23:56:34:
• Drag and Drop with Microsoft Internet Explorer 5 - amantons June 25, 2001 at 16:59:27:
• Drag and Drop with Microsoft Internet Explorer 5 - Melvin 14:30:25 2/16/01
• Drag and Drop with Microsoft Internet Explorer 5 - anonymous 09:26:41 11/22/00
• Drag and Drop with Microsoft Internet Explorer 5 - Vidyaranya K.P. 03:52:43 7/21/00
• Drag and Drop with Microsoft Internet Explorer 5 - Mathiew 19:35:29 5/25/00
• Drag and Drop with Microsoft Internet Explorer 5 - Chris 13:45:43 3/06/00

View the profile on Ryan Detert and the list of other Articles by Ryan Detert.