Interface elements for jQuery - Documentation - Sortables

Sortables

This plugin requires Draggables and Droppables plugins. Creates the posibility to define the order for elements inside containers. Elements can be moved from one container to other. Every container and item must have 'id' attribute.

example example: sortables floats

accept string mandatory the class name for items inside container
activeclass string optional when an acceptable draggable is moved the droppable gets this class
hoverclass string optional when an acceptable draggable is inside the droppable, the droppable dets this class
helperclass string optional helper is used to point the place where the item will be positioned. This is the class for the helper
opacity float ( < 1) optional opacity for the item while in drag
ghosting boolean optional when true the sorthelper contains a copy of the dragged element
tolerance 'pointer', 'intersect' or 'fit' optional points how the draggble must be against the droppable
fit boolean optional when true the draggable must be inside the droppable
fx integer optional duration for the effect applied to the draggable
onchange function optional callback that get as argument an array with serialized changed sortables
floats boolean optional tells if the sorted items are floats
containment string ('parent') optional the item can be dragged only inside the container
axis string ('vertically' or 'horizontally') optional define the axis which the dragged elements moves on
handle string or DOMElement optional the handel that starts the draggable
onHover function optional called when an accepted draggble is hovering a sortable. Applies to the sortable and gets as parameter the draggable DOMElement
onOut function optional called when an accepted draggble is leaving a sortable. Applies to the sortable and gets as parameter the draggable DOMElement
cursorAt object optional the dragged element is moved to the cursor position with the offset specified. Accepts value for top, left, right and bottom offset.
onStart function optional callback function triggered when the dragging starts
onStop function optional callback function triggered when the dragging stops

Note: if you plan to sort floats the sorthelper class should have same float is the rest of the sorted items.

Code sample:

$('ul').Sortable(
{
accept : 'sortableitem',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
helperclass : 'sorthelper',
opacity: 0.5,
fit : false
}
)

SortSerialize

This function returns the hash and an object (can be used as arguments for $.post) for every sortables in the page or specific sortables. The hash is based on the 'id' attributes of container and items.

Code sample:

serial = $.SortSerialize('sortable1');
alert(serial.hash);

SortableAddItem

In a sortable can be added new item by simply inserting the new item via DOM and then using SortableAddItem.

Code sample:

$('#sortable1')
    .append('<li id="newitem">new item</li>')
    .SortableAddItem(document.getElementById('newitem'));

SortableDestroy

Destroy a sortable

Code sample:

$('#sortable1')
    .SortableDestroy();

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb
Digg it del.ici.us NewsVine Reddit

eLiberatica 2008 - The Benefits of Open and Free Technologies Conference