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();