AJAX - The Complete Reference

PART II

Chapter 8: User Interface Design for Ajax 377

The complete code for the draggable list can be found at http://ajaxref.com/ch8/

draglist.html. A rendering of the example is shown in Figure 8-11.

At this point, we have many of the individual components necessary to build a working

to-do list—but not so fast. Already you have seen little details like double-clicking making

more sense when editing, but there will be many more. Consider what happens if you use

click-to-edit and you have drag-and-drop being handled with on mousedown—both will

try to happen at once. When interface conventions and the code underneath collide like this,

it suggests that we need a better architecture for the application. This is the topic of the next

chapter, as in this one, we try to focus on each individual Ajax UI issue separately.

The Real Power: Data on Demand

The real benefit of Ajax-based user interfaces isn’t the immediacy of editing and the

interactivity of dragging items. While it is true that we are delivering on the speed promise

here, we could just as easily have had a form post at the end to save everything we did

FIGURE 8-11 Dragging items in a list with immediate reordering