Chapter 7. Scriptaculous Drag and Drop

 

This chapter covers

  • Understanding drag-and-drop operations
  • Creating draggable page elements
  • Reacting to dropped draggable elements
  • Using drag and drop to sort elements

In the previous two chapters, we’ve seen ways that Scriptaculous effects and extended controls can extend the capabilities of our web applications beyond the capabilities provided by native HTML form elements. In this chapter we’ll explore yet another capability that Scriptaculous gives us to create spectacular user interfaces.

Few usability experts would argue that among the most ubiquitous and useful user interface interactions is the technique of drag and drop. Sometimes also termed click and drag, drag and drop is an easily adopted metaphor for moving items around an application, performing various activities, or creating associations between items. It has been a part of the graphical user interface for just about as long as that interaction paradigm has been in existence (introduced commercially with the first Macintosh systems in 1984). Unless you’ve spent your entire programming life staring at a command line, the concept of drag and drop is bound to be a natural and customary part of your everyday computer life.

7.1. The sample code for this chapter

7.2. Dragging things around

7.3. Dropping dragged things

7.4. Sorting by drag and drop

7.5. Summary