Home arrow Ruby-on-Rails arrow Dropping and Sorting with AJAX and script.aculo.us

Dropping and Sorting with AJAX and script.aculo.us

In this conclusion to a three-part series that explains how to use script.aculo.us on Rails, you'll learn dropping and sorting. 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 / 24
November 29, 2007
  1. · Dropping and Sorting with AJAX and script.aculo.us
  2. · Droppables with Ajax
  3. · Sortables
  4. · Ajax-enabled sortables

print this article

Dropping and Sorting with AJAX and script.aculo.us
(Page 1 of 4 )

Droppable options

hoverclass is a class name that will be added to the droppable when an accepted draggable is hovered over it, indicating to the user that the droppable is active. Weve already seen a couple examples of this in the previous section.

accept can be a string or an array of strings with CSS classes. If provided, the droppable will only accept draggables that have one of these CSS classes. For example:

  <div id="dragGreen" class="green box">drag </div>
  <%= draggable_element :dragGreen, :revert => true %>

  <div id="dragPink" class="pink box">drag </div>
  <%= draggable_element :dragPink, :revert => true %>

  <div id="dropAccept" class="pink box">drop here (green only).</div>
  <%= drop_receiving_element :dropAccept, :hoverclass => "hover",
       :accept => 'green' %>

containmentspecifies that the droppable will only accept the draggable if its contained in the given elements or array of elements. It is evaluated as a JavaScript expression, so specifying a DOM element ID requires two sets of quotation marks. For example:

  <div id="one">
<div id="dragGreen2" class="green box">drag</div>
<%= draggable_element :dragGreen2, :revert => true %>

  <div id="two">
      <div id="dragPink2" class="pink box">drag</div>
      <%= draggable_element :dragPink2, :revert => true %>

  <div id="dropContainment" class="pink box">drop here.</div>
  <%= drop_receiving_element :dropContainment, :hoverclass => "hover",
     :containment => "'one'" %>

onHoveris a callback function that fires whenever a draggable is moved over the droppable, and the droppable accepts it. The callback gets three parameters: the draggable, the droppable, and the percentage of overlapping as defined by the overlap option. A simple example, without any parameters:

  <div id="dropOnHover" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnHover, :hoverclass => "hover",
:onHover => "function(){  $('dropOnHover').update('hover!'); }" %>

And here is an example using all three possible callback parameters:

  <div id="dropOnHover" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnHover, :hoverclass => "hover",
        :onHover => "function(draggable, droppable, overlap){
$('dropOnHover').update('you dragged ' + draggable.id +
                ' over ' + droppable.id + ' by ' + overlap +
                ' percent'); }" %>

onDrop is called whenever a draggable is released over the droppable and its accepted. The callback gets two parameters: the draggable element and the droppable element. For example:

  <div id="dropOnDrop" class="pink box">drop</div>
  <%= drop_receiving_element :dropOnDrop, :hoverclass => "hover",
      :onDrop => "function(drag, drop){
         alert('you dropped ' + drag.id + ' on ' + drop.id) }" %>

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials