PART II
Chapter 8: User Interface Design for Ajax 371
else
{
position.x = e.clientX + document.documentElement.scrollLeft +
document.body.scrollLeft;
position.y = e.clientY + document.documentElement.scrollTop +
document.body.scrollTop;
}
return position;
}function dragDropStart(e, obj)
{
/* first we address browser differences for
finding the event object */
e = fixE(e);
/* next we calculate the offset of the difference between
top/left and the position */
var position = getPosition(e);
var left = parseInt(getStyle(obj, "left"), 10);
var top = parseInt(getStyle(obj, "top"), 10);/* if problems with the position reset it to zero values */
if (isNaN(left))
left = 0;
if (isNaN(top))
top = 0;
var xOffset = left - position.x;
var yOffset = top - position.y;/* set z-index to be the largest on the page so that it
drags on top of everything */
obj.style.zIndex = (getHighestZIndex() + 1);/* set up the movement handler */
document.onmousemove = function(e){return dragDropMove(e, obj, xOffset,
yOffset);};/* define the handler to stop dragging upon mouse release */
document.onmouseup = function(e){dragDropStop();};/* kill any event propogation and default actions */
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation)
{
e.stopPropagation();
e.preventDefault();
}
}function dragDropMove(e, obj, xOffset, yOffset)