PART II
Chapter 8: User Interface Design for Ajax 369
widely used libraries discussed towards the end of Chapter 5 like YUI provide great
support for smoothing these issues out.
As the dragging proceeds, the function dragDropMove() will be invoked. Similar to
other functions, it spends much of its time addressing cross-browser issues for event
handling and positioning. After that, its purpose is simply to change the passed object’s x
and y coordinates to the current position.function dragDropMove(e, obj, xOffset, yOffset)
{
/* address cross browser event issues */
e = fixE(e);
/* find the position and adjust it based upon offsets */
var position = getPosition(e);
var x = position.x + xOffset;
var y = position.y + yOffset;
/* set the dragged object's position */
obj.style.left = x + "px";
obj.style.top = y + "px";
return false;
}Once a user has finished dragging an object around, they release the mouse button
(onmouseup), which then invokes the function dragDropStop(). This function has the
simple job of detaching the event handler callbacks as shown next:function dragDropStop()
{
/* kill the current event handler callbacks */
document.onmousemove = null;
document.onmouseup = null;
}The rest of the code for the example (http://ajaxref.com/ch8/drag.html) addresses
cross-browser concerns for addressing events and position and does not illustrate the
algorithm for the purposes of illustrating the interface convention. We present the full code
here for inspection and direct readers online to experiment with it.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 8 : User Interface : Simple Drag and Drop</title>
<link rel="stylesheet" href="http://ajaxref.com/ch8/global.css" type="text
/css" media="screen" />
<style type="text/css">
#image1 {position:absolute;top:50px;left:20px; }
#image2 {position:absolute;top:150px;left:120px; }
#div1 {position:absolute;top:100px;left:220px;
width: 100px; height: 100px;
background-color: orange;