Main Page


return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);
<style type=”text/css”>
#div1 {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
z-index: 10;
#divDropTarget {
background-color: blue;
height: 200px;
width: 200px;
position: absolute;
left: 300px;
<p>Try dragging the red square onto the blue square.</p>
<div id=”div1” onmousedown=”handleMouseDown(event)”></div>
<div id=”divDropTarget”></div>
Advantages and disadvantages
The major advantage of simulated drag and drop is that it works across DOM-compliant browsers, such
as Internet Explorer 5.0+, Mozilla 1.0+, Safari 1.0+, and Opera 7.0+. This strategy is known to work
across multiple platforms, as well, because it uses basic DOM functionality.
Of course, simulated drag and drop doesn’t give you the hooks into the operating system that system
drag and drop provides. You can’t affect text or links being dragged by the user, and the dragged ele-
ments can only be dragged within a given window or frame. However, for most use cases, simulated
drag and drop gets the job done.
You’ve seen that simulating drag and drop takes a fair amount of JavaScript. You may be wondering,
“Isn’t there some sort of JavaScript library that handles all this for me?” The answer is the zDragDrop
library, freely available from
. This library provides a set of
objects that encapsulate much of the simulated drag-and-drop process. You need only include the file
zdragdroplib.js in your page to take advantage of the functionality.
Drag and Drop
16_579088 ch13.qxd 3/28/05 11:41 AM Page 405

JavaScript EditorFree JavaScript Editor     Ajax Editor