Home arrow Ruby-on-Rails arrow Page 3 - 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 - Draggable options
(Page 3 of 4 )

As with the Effect.* methods,Draggable.initializetakes a JavaScript hash of options to customize their behavior. Thedraggable_elementhelper takes a Ruby hash and converts it to JavaScript.

revert, if set totrue, causes the element to return back to its original location after being dragged. The value can also be a function, which will get called when a drag ends, to determine whether the element should be reverted. For example:

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

  <div id="functionRevertDIV" class="green box">function revert</div>
  <%= draggable_element :functionRevertDIV,
       :revert => "function(el){
          return Position.page(el)[0] > 100; }" %>

In the second example,:revertis a function that is passed a reference to the element when the dragging stops. In this case, it reverts the drag only if the position of the element is more than 100 pixels from the left edge of the window.

ghosting, if set totrue, will clone when a drag starts, leaving the original in place until the drag ends. For example:

  <div id="ghostingDIV" class="green box">ghosting</div>
  <%= draggable_element :ghostingDIV, :ghosting => true %>

handleallows for a subelement to be used as the handle—the part that can be clicked on to start the drag. The value should be a JavaScript expression that will evaluate to an element ID, or an element reference. For example:

  <div id="handleDIV" class="green box">
<span id="myHandle">handle</span>
  <%= draggable_element :handleDIV, :handle => "'myHandle'" %>

Note thatmyHandleis in two sets of quotes—that’s because it’s a JavaScript expression that needs to evaluate to a string.

changecan be set to a function that will be called every time the draggable is moved while dragging. The callback function gets the draggable as a parameter. For example:

  <div id="changeDIV" class="green box">change</div>
  <%= draggable_element :changeDIV, :change => "function(draggable) {
    draggable.element.innerHTML=draggable. currentDelta();
  }" %>

constraint, if set tohorizontalorvertical, will constrain the element to that dimension. It is evaluated as a JavaScript expression, so specifying a DOM element ID requires two sets of quote marks. For example:

  <div id="constraintDIV" class="green box">constraint</div>
  <%= draggable_element :constraintDIV, :constraint => 'vertical' %>

snapallows you to snap the draggable to a grid. Ifsnapisfalse(the default), no snapping occurs. If the value is an integern, the element will jump to the nearest point on a grid of n  pixels. The value can also be an array of the form[x, y], so that the horizontal and vertical axis can be constrained differently. Finally, the value can be a function that will be passed the current[x, y]coordinates of the element (as offsets from its starting position, not absolute coordinates), returns the snapped coordinates. For example:

  <div id="snapDIV_50" class="green box">snap to 50</div>
  <%= draggable_element :snapDIV_50, :snap => 50 %>

  <div id="snapDIV_50_100" class="green box">snap to 50,100</div>
  <%= draggable_element :snapDIV_50_100, :snap => '[50,100]' %>

  <div id="snapDIV_function" class="green box">snap to function</div>
<%= draggable_element :snapDIV_function, :snap => "function(x, y) {
    new_x = (x > 100) ? 100 : ((x < 0) ? 0 : x);
    new_y = (y > 100) ? 100 : ((y < 0) ? 0 : y);
    return [ new_x, new_y ];
}" %>

The last example demonstrates the power of defining a function for thesnap option. For both the x  and y dimensions, it limits the value to between0and100. The result is that the draggable is constrained to a small box on the screen.

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