PART II
Chapter 8: User Interface Design for Ajax 367
Drag-and-Drop
Drag-and-drop interfaces certainly do not have to rely on Ajax at all, but given the desire for
direct manipulation and a sense of immediate modification, it is clearly a very attractive
feature to provide to end users. To indicate something is draggable, a simple cursor change
or cursor change accompanied by some outlining effect upon object hover may be employed..draggable {cursor: move;}
.draggable:hover {border: solid 5px yellow;}NNOT EOTE With new-to-Web application conventions such as draggability or click-to-edit, great care
must be taken to encourage or literally invite users to interact. Changing visual states, providing
affordances such as cursor changes, or even popping up tooltips or other messages to alert users
to the availability of a new function may be required. In short, don’t assume that users will know
to click, double-click, drag, or right-click areas in your new Ajax-enhanced interfaces; you just
might need to tell them.Similar to the click-to-edit example, the class name of objects is used to indicate if
something is draggable.<img src="images/ajaxref.jpg" id="image1" 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>This time it is a bit easier since there is only one appropriate way to start dragging:
holding the mouse down.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);};
};Note that in this event binding snippet, the bound function has a mysterious e parameter
which is how some browsers pass the Event object around.