Jquery UI Sortable

All event callback functions have two parameters: event and UI, browser-owned event object, and encapsulated UI object
Ui.helper-A JQuery object that represents the sortable element, usually a cloned object of the current element
Ui.position-Represents the coordinate value object of the mouse relative to the current object {Top,left}
Ui.offset-Represents the coordinate value of the mouse relative to the current page, object {Top,left}
Ui.item-Represents the currently dragged element
Ui.placeholder-placeholder (if defined)
Ui.sender-The owning sortable object of the current drag element (useful only if the element is passed from another sortable object)

• Parameters (parameter name: Parameter type: Default value)
Appendto:string: ' Parent '
Defines where the helper moves with the mouse are being appended to during the drag (for example, to resolve overlap/z Index issues).
Initial: $ ('. Selector '). Sortable ({appendTo: ' body '});
Get: var appendTo = $ ('. Selector '). Sortable (' option ', ' appendTo ');
Set: $ ('. Selector '). Sortable (' option ', ' appendTo ', ' body ');

Axis:String:false
If there is a setting, the element can only be dragged horizontally or vertically. Optional values: ' x ', ' Y '
Initial: $ ('. Selector '). Sortable ({axis: ' x '});
Get: var axis = $ ('. Selector '). Sortable (' option ', ' axis ');
Set: $ ('. Selector '). Sortable (' option ', ' axis ', ' X ');

Cancel:selector: ': Input,button '
Prevents the sort action from occurring on the matching element.
Initial: $ ('. Selector '). Sortable ({cancel: ' button '});
Get: var cancel = $ ('. Selector '). Sortable (' option ', ' Cancel ');
Set: $ ('. Selector '). Sortable (' option ', ' Cancel ', ' button ');

ConnectWith:Selector:false
Allows an sortable object to connect to another sortable object, dragging the item element to another.
Initial: $ ('. Selector '). Sortable ({connectwith: '. otherlist '});
Get: var Connectwith = $ ('. Selector '). Sortable (' option ', ' connectwith ');
Set: $ ('. Selector '). Sortable (' option ', ' Connectwith ', '. Otherlist ');

Containment:element, String, Selector:false
A constrained sort action can occur only within a specified range. Optional values: Dom object, ' parent ', ' Document ', ' window ', or jquery object
Initial: $ ('. Selector '). Sortable ({containment: ' parent '});
Get: var containment = $ ('. Selector '). Sortable (' option ', ' containment ');
Set: $ ('. Selector '). Sortable (' option ', ' containment ', ' parent ');

Cursor:string: ' Auto '
Defines the style to start when the sort action is started.
Initial: $ ('. Selector '). Sortable ({cursor: ' crosshair '});
Get: var cursor = $ ('. Selector '). Sortable (' option ', ' cursor ');
Set: $ ('. Selector '). Sortable (' option ', ' cursor ', ' crosshair ');

CursorAt:Object:false
When you start the move, the mouse is positioned at a location (up to two directions). Optional values: {Top, left, right, bottom}.
Initial: $ ('. Selector '). Sortable ({cursorat: ' top '});
Get: var Cursorat = $ ('. Selector '). Sortable (' option ', ' Cursorat ');
Set: $ ('. Selector '). Sortable (' option ', ' Cursorat ', ' top ');

delay:integer:0
Sets the delay in milliseconds for how long to activate the sort action. This parameter prevents an accidental hit.
Initial: $ ('. Selector '). Sortable ({delay:500});
Get: var delay = $ ('. Selector '). Sortable (' option ', ' delay ');
Set: $ ('. Selector '). Sortable (' option ', ' delay ', 500);

Distance:integer:1
Determines how many pixels to drag at least on the element before the sort action is formally triggered.
Initial: $ ('. Selector '). Sortable ({distance:30});
Get: var distance = $ ('. Selector '). Sortable (' option ', ' distance ');
Set: $ ('. Selector '). Sortable (' option ', ' distance ', 30);

DropOnEmpty:Boolean:true
Whether it is allowed to be dragged into an empty sortable object.
Initial: $ ('. Selector '). Sortable ({droponempty:false});
Get: var droponempty = $ ('. Selector '). Sortable (' option ', ' droponempty ');
Set: $ ('. Selector '). Sortable (' option ', ' Droponempty ', false);

ForceHelperSize:Boolean:false
If true, forces the helper to has a size.
Initial: $ ('. Selector '). Sortable ({forcehelpersize:true});
Get: var forcehelpersize = $ ('. Selector '). Sortable (' option ', ' forcehelpersize ');
Set: $ ('. Selector '). Sortable (' option ', ' forcehelpersize ', true);

ForcePlaceholderSize:Boolean:false
If true, forces the placeholder to has a size.
Initial: $ ('. Selector '). Sortable ({forceplaceholdersize:true});
Get: var forceplaceholdersize = $ ('. Selector '). Sortable (' option ', ' forceplaceholdersize ');
Set: $ ('. Selector '). Sortable (' option ', ' forceplaceholdersize ', true);

Grid:Array:false
The item element of the sort object is treated as a lattice, and each move is moved by a grid size, with the array value: [X, Y]
Initial: $ ('. Selector '). Sortable ({grid: [50, 20]});
Get: var Grid = $ ('. Selector '). Sortable (' option ', ' grid ');
Set: $ ('. Selector '). Sortable (' option ', ' grid ', [50, 20]);

Handle:selector, Element:false
An action that restricts sorting can only start with an element in the item element.
Initial: $ ('. Selector '). Sortable ({handle: ' H2 '});
Get: var handle = $ ('. Selector '). Sortable (' option ', ' handle ');
Set: $ ('. Selector '). Sortable (' option ', ' Handle ', ' H2 ');

Helper:string, Function: ' Original '
Sets whether to display an auxiliary element when dragging an element. Optional values: ' Original ', ' Clone '
Initial: $ ('. Selector '). Sortable ({helper: ' clone '});
Get: var helper = $ ('. Selector '). Sortable (' option ', ' helper ');
Set: $ ('. Selector '). Sortable (' option ', ' helper ', ' clone ');

Items:selector: ' > * '
Specifies which elements can be dragged and sorted in the Sort object.
Initial: $ ('. Selector '). Sortable ({items: ' li '});
Get: var items = $ ('. Selector '). Sortable (' option ', ' items ');
Set: $ ('. Selector '). Sortable (' option ', ' Items ', ' Li ');

Opacity:Float:false
Defines the transparency that is displayed by the secondary element (helper) when sorting.
Initial: $ ('. Selector '). Sortable ({opacity:0.6});
Get: var opacity = $ ('. Selector '). Sortable (' option ', ' opacity ');
Set: $ ('. Selector '). Sortable (' option ', ' opacity ', 0.6);

PlaceholderType:StringDefault:false
Sets the CSS style of the blank placeholder when the sort action occurs.
Initial: $ ('. Selector '). Sortable ({placeholder: ' ui-state-highlight '});
Get: var placeholder = $ ('. Selector '). Sortable (' option ', ' placeholder ');
Set: $ ('. Selector '). Sortable (' option ', ' placeholder ', ' ui-state-highlight ');

Revert:Boolean:false
If set to true, the dragged element will have an animated effect when it returns to the new position.
Initial: $ ('. Selector '). Sortable ({revert:true});
Get: var revert = $ ('. Selector '). Sortable (' option ', ' revert ');
Set: $ ('. Selector '). Sortable (' option ', ' revert ', true);

Scroll:Boolean:true
If set to True, the element is automatically scrolled when it is dragged to the edge of the page.
Initial: $ ('. Selector '). Sortable ({scroll:false});
Get: var scroll = $ ('. Selector '). Sortable (' option ', ' scroll ');
Set: $ ('. Selector '). Sortable (' option ', ' scroll ', false);

Scrollsensitivity:integer:20
Sets how many pixels the element moves to the edge and then starts scrolling the page.
Initial: $ ('. Selector '). Sortable ({scrollsensitivity:40});
Get: var scrollsensitivity = $ ('. Selector '). Sortable (' option ', ' scrollsensitivity ');
Set: $ ('. Selector '). Sortable (' option ', ' scrollsensitivity ', 40);

Scrollspeed:integer:20
Sets the speed of page scrolling.
Initial: $ ('. Selector '). Sortable ({scrollspeed:40});
Get: var scrollspeed = $ ('. Selector '). Sortable (' option ', ' scrollspeed ');
Set: $ ('. Selector '). Sortable (' option ', ' scrollspeed ', 40);

Tolerance:string: ' intersect '
Sets how many elements are reordered when the element is dragged across other elements. Optional values: ' intersect ', ' pointer '
Intersect: at least 50% overlap
Pointer: mouse pointer overlapping elements
Initial: $ ('. Selector '). Sortable ({tolerance: ' pointer '});
Get: var tolerance = $ ('. Selector '). Sortable (' option ', ' tolerance ');
Set: $ ('. Selector '). Sortable (' option ', ' tolerance ', ' pointer ');

zindex:integer:1000
Sets the Z-index value of the element when the sort action occurs.
Initial: $ ('. Selector '). Sortable ({zindex:5});
Get: var ZIndex = $ ('. Selector '). Sortable (' option ', ' zIndex ');
Set: $ ('. Selector '). Sortable (' option ', ' ZIndex ', 5);

• Events

Start
This event is triggered when the sort action starts.
Definition: $ ('. Selector '). Sortable ({Start:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortstart ', function (event, UI) {...});

Sort
This event is triggered when a sort element occurs.
Definition: $ ('. Selector '). Sortable ({Sort:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' sort ', function (event, UI) {...});

Change
This event is triggered when an element has been sorted and the coordinates have changed.
Definition: $ ('. Selector '). Sortable ({Change:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortchange ', function (event, UI) {...});

Beforestop
This event is triggered before the sort action ends. Placeholder elements and auxiliary elements remain in effect at this time.
Definition: $ ('. Selector '). Sortable ({Beforestop:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortbeforestop ', function (event, UI) {...});

Stop
This event is triggered when the sort action ends.
Definition: $ ('. Selector '). Sortable ({Stop:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortstop ', function (event, UI) {...});

Update
This event is triggered when the sort action ends and the element coordinates have changed.
Definition: $ ('. Selector '). Sortable ({Update:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortupdate ', function (event, UI) {...});

Receive
This event is triggered when a connected sortable object receives an element of another sortable object.
Definition: $ ('. Selector '). Sortable ({Receive:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' sortreceive ', function (event, UI) {...});

Over
This event is triggered when an element is dragged and moved into another sortable object.
Definition: $ ('. Selector '). Sortable ({Over:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortover ', function (event, UI) {...});

Out
This event is triggered when an element is dragged out of the sortable object and moved out and into another sortable object.
Definition: $ ('. Selector '). Sortable ({Out:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortout ', function (event, UI) {...});

Activate
When a sortable object with a connection is used to start the sort action, all allowed sortable trigger this event.
Definition: $ ('. Selector '). Sortable ({Activate:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortactivate ', function (event, UI) {...});

Deactivate
When a sortable object with a connection is used to end the sort action, all allowed sortable trigger this event.
Definition: $ ('. Selector '). Sortable ({Deactivate:function (event, UI) {...}});
Bindings: $ ('. Selector '). Bind (' Sortdeactivate ', function (event, UI) {...});

• methods
Destory
Removes the drag function from the element.
Usage:. Sortable (' Destroy ')

Disable
Disables the drag-and-drop function of the element.
Usage:. Sortable (' Disable ')

Enable
Enables drag-and-drop functionality for elements.
Usage:. Sortable (' Enable ')

Option
Gets or sets the parameters of the element.
Usage:. Sortable (' option ', Optionname, [value])

Serialize
Gets or sets the ID property of each item element after serialization.
Usage:. Sortable (' Serialize ', [options])

ToArray
Gets an array of ID attributes for each item element after serialization.
Usage:. Sortable (' ToArray ')

Refresh
Manually re-refreshes the order of the item element for the current sortable object.
Usage:. Sortable (' Refresh ')

Refreshpositions
This method may degrade performance by manually re-refreshing the coordinates of the item element of the current sortable object.
Usage:. Sortable (' refreshpositions ')

Cancel
Cancels the order change of the item element in the current sortable object.
Usage:. Sortable (' Cancel ')

Official API Address: http://jqueryui.com/demos/sortable/

Reprinted from: http://w8700569.iteye.com/blog/1474681

Jquery UI Sortable