method

sortable_element

Importance_5
v2.3.8 - Show latest stable - 4 notes - Class: ActionView::Helpers::ScriptaculousHelper
sortable_element(element_id, options = {}) public

Makes the element with the DOM ID specified by element_id sortable by drag-and-drop and make an Ajax call whenever the sort order has changed. By default, the action called gets the serialized sortable element as parameters.

Example: 

  <%= sortable_element("my_list", :url => { :action => "order" }) %>

In the example, the action gets a "my_list" array parameter containing the values of the ids of elements the sortable consists of, in the current order.

Important: For this to work, the sortable elements must have id attributes in the form "string_identifier". For example, "item_1". Only the identifier part of the id attribute will be serialized.

Additional options are:

  • :format - A regular expression to determine what to send as the serialized id to the server (the default is /^[^_]*_(.*)$/).
  • :constraint - Whether to constrain the dragging to either :horizontal or :vertical (or false to make it unconstrained).
  • :overlap - Calculate the item overlap in the :horizontal or :vertical direction.
  • :tag - Which children of the container element to treat as sortable (default is li).
  • :containment - Takes an element or array of elements to treat as potential drop targets (defaults to the original target element).
  • :only - A CSS class name or array of class names used to filter out child elements as candidates.
  • :scroll - Determines whether to scroll the list during drag operations if the list runs past the visual border.
  • :tree - Determines whether to treat nested lists as part of the main sortable list. This means that you can create multi-layer lists, and not only sort items at the same level, but drag and sort items between levels.
  • :hoverclass - If set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.
  • :handle - Sets whether the element should only be draggable by an embedded handle. The value may be a string referencing a CSS class value (as of script.aculo.us V1.5). The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.
  • :ghosting - Clones the element and drags the clone, leaving the original in place until the clone is dropped (default is false).
  • :dropOnEmpty - If true the Sortable container will be made into a Droppable, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside (default is false).
  • :onChange - Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
  • :onUpdate - Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter.

See http://script.aculo.us for more documentation.

Show source
Register or log in to add new notes.
October 22, 2008
2 thanks

Regenerate the JavaScript after each RJS call

I had a sortable_element that was also a drop_receiving_element. After an element was dropped onto this div, an RJS action refreshed the div with the new elements. The div expanded with these new elements, but the sortable portion remained the same size.

To correctly be able to reorder elements after an Element.update call (from an RJS action or wherever), you need to include a second call to Sortable.create in your RJS view (or other JavaScript), using sortable_element_js or whatever method you please.

November 20, 2008 - (<= v2.1.0)
0 thanks

Problematic :scroll option

If you use the :scroll => true option, note that at http://github.com/madrobby/scriptaculous/wikis/sortable-create it says:

“If you want your sortable list to be scrollable, wrap the list in a div and set the div to scrollable as apposed to making the ul element scrollable. Also, in IE you must set “position:relative” on the scrollable div.”

July 30, 2009
0 thanks

can we use both sortable_element and drop_recieving_element on same list

I had a sortable_element that was also a drop_receiving_element. element it’s dropping while dropping element into selected container ,but not element dragging is not viewble to end users. it’s dragging only in sortable list area. but mu droppble contanier is another one.i used scroll => true in sortable_element . but its not working for sorting and dropping element into contianer. could u letme know how to use both methods on same list

September 18, 2009
0 thanks

Regenerate the JavaScript after each RJS call

RISCfuture - I had trouble using sortable_element_js in my rjs (javascript error when I used options), but had success with page.sortable(‘the_id’,{a_hash_of_my_options}) in my rjs