↑
Main Page

zDragDrop

return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);

}

</script>

#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;

}

</style>

</head>

<body>

<p>Try dragging the red square onto the blue square.</p>

</body>

</html>

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.

zDragDrop

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

http://www.nczonline.net/downloads/

. 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.

405

Drag and Drop

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