372 Part II: Developing an Ajax Library^
{
/* 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;
}function dragDropStop()
{
/* kill the current event handler callbacks */
document.onmousemove = null;
document.onmouseup = null;
}window.onload = function ()
{
var toDrag = AjaxTCR.util.DOM.getElementsByClassName("draggable");
for (var i = 0; i< toDrag.length; i++)
toDrag[i].onmousedown = function(e){dragDropStart(e, this);};
};
</script>
</head>
<body>
<div class="content"><h1>Drag and Drop</h1>
<img src="http://ajaxref.com/ch8/images/ajaxref.jpg" id="image1"
class="draggable" title="Drag Me!" alt="Enable Images to Drag and Drop" />
<img src="http://ajaxref.com/ch8/images/ajaxref.jpg" id="image2"
class="draggable" title="Drag Me!" alt="Enable Images to Drag and Drop" />
<div id="div1" class="draggable" title="Drag Me!">
I am a box of content. You can drag me too!</div></div>
</body>
</html>Note that in the previous example there is no network activity going on. We need to
trigger some network activity based upon the user activity in order to qualify as a real
application of Ajax. This is where the “drop” in drag-and-drop comes in. Typically in a
drag-and-drop powered interface, an object is dragged onto some region or icon to invoke
an activity. For example, we might modify our example to put a region onscreen to create a
target area such as a shopping cart or trash can. If the drug object is released in one of these
drop zones, it will trigger the particular action defined. In order to know that the action is