Sortable.create

Use Sortable.create to initialize a sortable element.

 

Availability

 

script.aculo.us V1.0 and later.

 

Syntax

 

Sortable.create('id_of_container',[options]);

 

Options

 

Option

Since

Default

Description

tag

V1.0

li

Sets the kind of tag (of the child elements of the container) that will be made sortable. For UL and OL containers, this is ‘LI’, you have to provide the tag kind for other sorts of child tags.

only

V1.0

(none)

Further restricts the selection of child elements to only encompass elements with the given CSS class (or, if you provide an array of strings, on any of the classes).

overlap

V1.0

vertical

vertical        Either ‘vertical’ or ‘horizontal’. For floating sortables or horizontal lists, choose ‘horizontal’. Vertical lists should use ‘vertical’.

constraint

V1.0

vertical

Restricts the movement of Draggables, see the constraint option of Draggables.

containment

V1.0

(only within container

Enables dragging and dropping between Sortables. Takes an array of elements or element-ids (of the containers).

format

??

/^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/

The RegEx to get the correct values from the IDs of all sortable child elements. This can be important for the output of Sortable.serialize

handle

V1.0

(none)

Makes the created Draggables use handles, see the handle option on Draggables.

hoverclass

V1.1b1

(none)

Gives the created Droppables a hoverclass (see there).

ghosting

V1.5

false

If set to true, dragged elements of the Sortable will be cloned and appear as “ghost”, i.e. a representation of their original element, instead of directly dragging the original element. See below for more details.

dropOnEmpty

V1.5

false

If set to 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.

scroll

V1.5.2

(none)

When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars. Does not yet work for scrolling the entire document. To get this to work correctly, include this line in your code before creating the sortable: Position.includeScrollOffsets = true;

scrollSensitivity

??

20

Will start scrolling when element is x pixels from the bottom, where x is the scrollSensitivity.

scrollSpeed

??

15

Will scroll the element in increments of scrollSpeed pixels.

tree

V1.6.1

false

If true, sets sortable functionality to elements listed in treeTag

treeTag

V1.6.1

ul

The element type tree nodes are contained in.

 

You can provide the following callbacks in the options parameter:

 

Callback

Since

Description

onChange

V1.0

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

V1.0

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. Note that the id attributes of the elements contained in the Sortable must be named as described in Sortable.serialize

 

Notes

 

Important: You can use Sortable.create on any container element that contains Block Elements, with the exception of TABLE, THEAD, TBODY and TR. This is a technical restriction with current browsers.

 

A sortable nested somewhere inside a table won’t work well under IE unless the table has a “position:relative” style. If you use the css display: table property, sortable lists will work a little, but doesn’t allow true drag and drop of the elements.

 

Got it working using tbody as container and TR as the sortables (IE6 (pc) and Firefox (mac/pc).

 

A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.