↑
Main Page

zDraggable.moveTo

oDraggable.addEventListener(“dragstart”, function (oEvent) {

alert(oEvent.type + “ occurred at “ + oEvent.timeStamp);

oEvent.preventDefault();

});

Example

To recreate the effect of the drop target example from the previous section, you can make use of several

other methods built in to the zDragDrop library:

zDraggable.moveTo(x, y)

— Moves the

zDraggable

element to the position x,y.

zDropTarget.getLeft()

— Returns the left coordinate of the drop target.

zDropTarget.getTop()

— Returns the top coordinate of the drop target.

If you use these methods along with the event handling functionality of zDragDrop, the code becomes

much cleaner:

<html>

<head>

<title>Simulated Drag And Drop Example</title>

function doLoad() {

var oDraggable = new zDraggable(document.getElementById(“div1”),

zDraggable.DRAG_X | zDraggable.DRAG_Y);

var oDropTarget =

new zDropTarget(document.getElementById(“divDropTarget”));

oDraggable.addDropTarget(oDropTarget);

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

oEvent.relatedTarget.moveTo(oDropTarget.getLeft(),

oDropTarget.getTop());

});

}

</script>

#div1 {

background-color: red;

height: 100px;

width: 100px;

position: absolute;

z-index: 10;

}

#divDropTarget {

background-color: blue;

height: 200px;

width: 200px;

408

Chapter 13

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