↑
Main Page

element is being dragged

The

zDraggable

object supports three events:

dragstart

— Occurs immediately before beginning to drag the element.

drag

— Fires continuously while the element is being dragged.

dragend

— Fires after the element has stopped being dragged, regardless of whether it has

been dropped on a valid drop target.

The

zDropTarget

object supports only one event,

drop

, which occurs when a draggable item is

dropped onto it.

To make use of these events, the zDragDrop library uses DOM-style event handlers that can be assigned

using the

addEventListener()

method. Unlike the DOM, it has only two arguments: the type of event

to handle and the event-handling function. For example, the following code assigns an event handler to

zDropTarget

object that will display the message

“dropped”

when an item is dropped:

oDropTarget.addEventListener(“drop”, function () {

alert(“dropped”);

});

It’s also possible to remove event handlers by using

removeEventListener()

with the same arguments:

function handleDragEnd() {

alert(“drag end”);

}

oDraggable.addEventListener(“dragend”, handleDragEnd);

//other code here

oDraggable.removeEventListner(“dragend”, handleDragEnd);

The zDragDrop library also supports an

event

object that contains extra information about a given

event. The properties of this

event

object are:

type

– The type of event that occurred (such as

“drag”

“dragend”

target

— The object that caused the event (a

zDraggable

zDropTarget

timeStamp

— The date and time, in milliseconds, when the event occurred.

relatedTarget

— The other object related to the event. When the drop event fires on a

zDropTarget

, this is always equal to the

zDraggable

object that was dropped on it.

cancelable

— Indicates whether the event can be cancelled.

Additionally, the

event

object supports one method,

preventDefault()

, which can be used to prevent

the default behavior of an event. Currently, the only event that can be prevented is

dragstart

The event object is passed into an event-handler function as the only argument, so you can access it

this way:

407

Drag and Drop

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