Main Page

Simulated Drag and Drop

function handleDragDropEvent(oEvent) {
oEvent.dataTransfer.setData(“URL”, “”);
<p>Try dragging the red square into another browser window.</p>
<p><div style=”background-color: red; height: 100px; width: 100px”
In this example, dragging the red
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.
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:
<title>Simulated Drag And Drop Example</title>
<script type=”text/javascript”>
Drag and Drop
16_579088 ch13.qxd 3/28/05 11:41 AM Page 399

JavaScript EditorFree JavaScript Editor     Ajax Editor