Dropping and Sorting with AJAX and script.aculo.us

(Page 1 of 4 )

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.

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. We’ve 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 it’s 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>

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

  <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 it’s 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) }" %>

Next: Droppables with Ajax >>
 

More Ruby-on-Rails Articles
More By O'Reilly Media

Comments On: Dropping and Sorting with AJAX and script.aculo.us

· This article is an excerpt from the book "Ajax on Rails," published by O'Reilly. We...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of the book Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Check it out today at your favorite bookstore. Buy this book now.