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>
</div>
<%= 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.
Next: Droppables >>
More Ruby-on-Rails Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Check it out today at your favorite bookstore. Buy this book now.
|
|
