How to do the impossible with Google Gears
Multi-dialogue forms on one page
You are here: irt.org | Articles | Dynamic HTML (DHTML) | Drag and Drop with Microsoft Internet Explorer 5 [ previous next ]
Published on: Sunday 13th February 2000 By: Ryan Detert
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.
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.
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.
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.
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:
Fires when the source is dragged over a valid drop target object. The drop target may be in another browser window.
Fires on the target element continuously while the user drags the object over a valid drop target.
Fires on the target element when the user releases the mouse button over a valid drop target.
Fires if the user drags an object over a valid drop target and then out of the valid drop target.
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.
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.
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.
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.)
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:
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:
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.
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.
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 + ' ';
// 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>Try the IE5.0 Drag n' Drop Demo
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.
How to do the impossible with Google Gears
Multi-dialogue forms on one page
Turning Tables Into Selection Lists