Drag and Drop with script.aculo.us and Rails - Drag and Drop (Page 2 of 4 )
The ability to directly manipulate on-screen objects is often taken for granted in desktop applications, but web interfaces have been slow to follow—largely due to the complex DOM manipulation it requires. script.aculo.us changes that equation, and provides surprisingly easy and powerful support for drag-and-drop interfaces. That means that web developers can decide to use drag and drop based primarily on usability concerns, rather than technical ones. As with visual effects, it’s important to remember that drag and drop is often not the best solution to an interface problem. But when it is, script.aculo.us makes it painless.
script.aculo.us provides a Draggable class that’s used to add draggability to DOM elements. To get started, create a new template file, draggables.rhtml. In it, add this:
Rails provides thedraggable_elementhelper to create draggables. Just likeDraggable.initialize, the first argument is the ID of an element, and the second is a hash of options. For example:
When the user mouses over this element, the cursor will change to a “move” icon (as in Figure 4-1), indicating that the element is draggable. Of course, the CSS doesn’t need to be inline—it could easily be part of the external stylesheet.