Dropping and Sorting with AJAX and script.aculo.us

Dropping and Sorting with AJAX and script.aculo.us - Sortables
(Page 3 of 4 )

 

Sortables are built on top of draggables and droppables so that with one fell swoop, you can give a group of elements advanced drag-and-drop behavior so that they can be reordered graphically.

UseSortable.createto create a sortable from JavaScript. For example:

  <ul id="list">
    <li>Buy milk</li>
    <li>Take out trash</li>
    <li>Make first million</li>
  </ul>

  <%= javascript_tag "Sortable.create('list')" %>

Of course, Rails provides helpers for this task as well:sortable_elementandsortable_element_js. Just like the other drag-and-drop related helpers, the first argument is the target DOM element and the second is a hash of options used to affect the behavior. The other available options are:

hoverclass

Passed on to the droppables, so that the specified CSS class is added to the droppable whenever an acceptable draggable is hovered over it.

handle

Passed on to the draggable. This is especially useful when the sortable elements are interactive, such as links or form elements. For example:

  <ul id="listHandle">
    <li><span class="handle">x</span> Buy milk</li>
    <li><span class="handle">x</span> Take out trash</li>
    <li><span class="handle">x</span> Make first million</li>
  </ul>

  <%= sortable_element :listHandle, :handle => 'handle' %>

ghosting

Passed on to the draggables as well. For example:

  <ul id="listGhosting">
    <li>Buy milk</li>
    <li>Take out trash</li>
    <li>Make first million</li>
  </ul>
  <%= sortable_element :listGhosting, :ghosting => true %>

constraintand overlap

Work together to determine which direction the Sortable will operate in: eithervertical (the default) orhorizontal.constraintis passed on to the draggables—it restricts which direction the elements can be dragged.overlapis passed to the droppable, making it only accept the draggable element if it is more than 50
percent overlapped in the given dimension. For example:

  <ul id="listHorizontal">
    <li style="display: inline;
margin-right: 10px;">Buy milk</li>
    <li style="display: inline;
margin-right: 10px;">Take out trash</li>
    <li style="display: inline;
margin-right: 10px;">Make first million</li>
  </ul>

  <%= sortable_element  :listHorizontal,
        :constraint => 'horizontal',
        :overlap    => 'horizontal' %>

tag

Sets the kind of tag that is used for the sortable elements. By default, this isLI, which is appropriate forULandOLlist containers. If the sortable elements are something else (such as paragraphs orDIVs), you can specify that here. For example:

  <div id="listTag">
    <div>Buy milk</div>
    <div>Take out trash</div>
    <div>Make first million</div>
  </div>

  <%= sortable_element :listTag, :tag => 'div' %>

only

Restricts the selection of child elements to elements with the given CSS class or an array of classes. For example:

  <ul id="listOnly">
    <li class="sortable">Buy milk</li>
    <li class="sortable">Take out trash</li>
    <li>Make first million</li>
  </ul>

  <%= sortable_element :listOnly, :only => 'sortable' %>

containment

Used to enable drag-and-drop between multiple containers. A container will only accept draggables whose parent element is incontainment, which can be either an ID or an array of IDs. For example:

  <ul id="list1">
    <li>Buy milk</li>
    <li>Take out trash</li>
  </ul> 
  <ul id="list2">
    <li>Make first million</li>
  </ul>

  <%= sortable_element :list1, :containment => ['list1', 'list2'] %>
  <%= sortable_element :list2, :containment => ['list1', 'list2'] %>

dropOnEmpty

Useful when you have two sortable containers, and you want elements to be able to be dragged between them. By default, an empty container can’t have new draggables dropped onto it. By settingdropOnEmptytotrue, that’s reversed. For example:

  <ul id="listFull">
      <li id="thing_1">Buy milk</li>
      <li id="thing_2">Take out trash</li>
      <li id="thing_3">Make first million</li>

  </ul>

  <ul id="listEmpty">
  </ul>

  <%= sortable_element :listFull,
       :containment => ['listFull', 'listEmpty'],
       :dropOnEmpty => true %>
  <%= sortable_element :listEmpty,
       :containment => ['listFull', 'listEmpty'],
       :dropOnEmpty => true %>

scroll

Allows for sortables to be contained in scrollable areas, and dragged elements will automatically adjust the scroll. To accomplish this, the scrollable container must be wrapped in an element with the styleoverflow:scroll, and thescroll option should be set to that element’s ID. The value is evaluated as a JavaScript expression, so it’s necessary to put it in two sets of quotes. Scrolling in script.aculo.us must be explicitly enabled, by settingPosition.includeScrollOffsetstotrue. For example:

  <div id="container" style="overflow: scroll; height: 200px;">
    <ul id="listScroll">
      <% 20.times do |i| %>
        <li>Buy milk</li>
        <li>Take out trash</li>
        <li>Make first million</li>
      <% end %>
    </ul>
  </div>

  <%= javascript_tag "Position.includeScrollOffsets = true" %>
  <%= sortable_element :listScroll, :scroll => "'container'" %>

onChange

Called whenever the sort order changes while dragging. When dragging from one sortable to another, the callback is called once on each sortable. The callback gets the affected element as its parameter. For example:

  <ul id="listChange">
    <li>Buy milk</li>
    <li>Take out trash</li>
    <li>Make first million</li>
  </ul>

  <%= sortable_element :listChange,
       :onChange => "function(el) { alert(el.innerHTML); }" %>

onUpdate

Called when the drag ends and the sortable’s order has changed. When dragging from one sortable to another,onUpdate is called once for each sortable. The callback gets the container as its parameter. For example:

  <ul id="listUpdate">
    <li>Buy milk</li>
    <li>Take out trash</li>
    <li>Make first million</li>
  </ul>

  <%= sortable_element :listUpdate,
       :onUpdate => "function(el) { alert(el.innerHTML); }" %>

blog comments powered by Disqus