↑
Main Page

Creating a draggable element

The

zDraggable

class can be used to make any absolutely-positioned DOM element draggable. The con-

structor takes two arguments, the DOM element to make draggable and a set of constraints determining

how the element can be dragged. The second argument is made up of one or more special values.

To make an element draggable horizontally only, use

zDraggable.DRAG_X

as the second argument:

var oDiv = document.getElementById(“divToDrag”);

var oDraggable = new zDraggable(oDiv, zDraggable.DRAG_X);

To make an element draggable vertically only, use

zDraggable.DRAG_Y

as the second argument:

var oDiv = document.getElementById(“divToDrag”);

var oDraggable = new zDraggable(oDiv, zDraggable.DRAG_Y);

If the element must be dragged in both directions, use the bitwise OR operator to combine the two values:

var oDiv = document.getElementById(“divToDrag”);

var oDraggable = new zDraggable(oDiv, zDraggable.DRAG_X | zDraggable.DRAG_Y);

Because the

zDraggable

constructor expects a DOM element as an argument, you can use this code

only after the page has completely loaded.

Creating a drop target

Using the zDragDrop library, you must explicitly set a drop target for a draggable element. To start, create

zDropTarget

object like this:

var oDivTarget = document.getElementById(“divDropTarget”);

var oDropTarget = new zDropTarget(oDiv);

After you have created the drop target, you can add it to the draggable element by using the

addDropTarget()

method. For example:

var oDivToDrag = document.getElementById(“divToDrag”);

var oDivTarget = document.getElementById(“divDropTarget”);

var oDraggable = new zDraggable(oDiv, zDraggable.DRAG_X | zDraggable.DRAG_Y);

var oDropTarget = new zDropTarget(oDiv);

oDraggable.addDropTarget(oDropTarget);

With this code set up, it’s now possible to use the zDragDrop library’s built-in events to manage the

dragging and dropping.

Events

Although not as robust as Internet Explorer ’s drag-and-drop events, the zDragDrop library does offer a

few basic events that can make dealing with simulated drag and drop a little bit easier.

406

Chapter 13

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