↑
Main Page

Simulated Drag and Drop

oEvent.srcElement.dragDrop();

}

function handleDragDropEvent(oEvent) {

oEvent.dataTransfer.setData(“URL”, “http://www.wrox.com/”);

}

</script>

</head>

<body>

<p>Try dragging the red square into another browser window.</p>

<p><div style=”background-color: red; height: 100px; width: 100px”

onmousemove=”handleMouseMove(event)”

ondragstart=”handleDragDropEvent(event)”>http://www.wrox.com</div>

</p>

</body>

</html>

In this example, dragging the red

<div/>

into another browser window causes the browser to navigate

to the Wrox home page,

http://www.wrox.com

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.

Simulated Drag and Drop

Simulated drag and drop has been around since Internet Explorer 4.0 and Netscape Navigator 4.0 intro-

duced support for Dynamic HTML. The basic idea is simple: You create an absolutely positioned layer

that can be moved along with the mouse. In practice, it’s a bit more complicated to get the true drag-

and-drop feel to come across to users.

The method for this type of drag and drop is an extension of the classic cursor trail script. You may remem-

ber coming across a Web page where your cursor was followed by an image. This is quite easy to do:

<html>

<head>

<title>Simulated Drag And Drop Example</title>

399

Drag and Drop

16_579088 ch13.qxd 3/28/05 11:41 AM Page 399