Professional JavaScript For Web Developers

Chapter 13
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:
Simulated Drag And Drop Example
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