Home arrow Ruby-on-Rails arrow Page 2 - Drag and Drop with script.aculo.us and Rails

Drag and Drop with script.aculo.us and Rails

In this second part to a three-part series that explains how to use script.aculo.us on Rails, you'll learn how to use a Rails helper and drag and drop. This article is excerpted from chapter four of Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
November 15, 2007
  1. · Drag and Drop with script.aculo.us and Rails
  2. · Drag and Drop
  3. · Draggable options
  4. · Droppables

print this article

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:

  <div id="dragDIV" class="green box">drag</div>
  <%= javascript_tag "new Draggable('dragDIV')" %>

When the page is loaded (http://localhost:3000/chapter4/draggables), the JavaScript statement causes a new instance of theDraggableclass to be created, tied to the given element ID. From then on, you can drag the element around the page. Notice how it becomes slightly transparent while it is dragged—it uses the sameOpacityeffect we explored earlier. TheDraggable constructor takes an optional second parameter for options, which will be detailed later.

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:

  <div id="helperDIV" class="green box">helper</div>
  <%= draggable_element :helperDIV %>

The output ofdraggable_elementis a<script>element with anewDraggablestatement. If you just need the JavaScript statement without the<script>tags, usedraggable_element_jsinstead. For example:

  <div id="clickDIV" class="green box">
      <%= button_to_function "Make draggable",

For usability, it’s often a good idea to change the cursor when it’s over a draggable element. The CSS cursor property makes it easy. For example:

  <div class="green box" style="cursor:move">drag</div>

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.

Figure 4-1.  Using the CSS cursor property

blog comments powered by Disqus

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials