↑
Main Page

EventUtil.addEventHandler

of logic to ensure that each item is arranged appropriately, but this is enough to get you started. Here is

how all the code looks when put together:

<html>

<head>

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

var iDiffX = 0;

var iDiffY = 0;

function handleMouseMove() {

var oEvent = EventUtil.getEvent();

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

oDiv.style.left = oEvent.clientX - iDiffX;

oDiv.style.top = oEvent.clientY - iDiffY;

}

function handleMouseDown() {

var oEvent = EventUtil.getEvent();

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

iDiffX = oEvent.clientX - oDiv.offsetLeft;

iDiffY = oEvent.clientY - oDiv.offsetTop;

EventUtil.addEventHandler(document.body, “mousemove”,

handleMouseMove);

EventUtil.addEventHandler(document.body, “mouseup”, handleMouseUp);

}

function handleMouseUp() {

var oEvent = EventUtil.getEvent();

EventUtil.removeEventHandler(document.body, “mousemove”,

handleMouseMove);

EventUtil.removeEventHandler(document.body, “mouseup”,

handleMouseUp);

if (isOverDropTarget(oEvent.clientX,oEvent.clientY)) {

alert(“dropped!”);

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

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

oDiv.style.left = oTarget.offsetLeft;

oDiv.style.top = oTarget.offsetTop;

}

function isOverDropTarget(iX, iY) {

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

var iX1 = oTarget.offsetLeft;

var iX2 = iX1 + oTarget.offsetWidth;

var iY1 = oTarget.offsetTop;

var iY2 = iY1 + oTarget.offsetHeight;

404

Chapter 13

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