Parameters of the jquery sortable plugin

All Event Callback functions have two parameters: Event and UI. the browser has its own event object and encapsulated UI object.
Ui. helper-indicates the jquery object of the sortable element, which is usually a clone object of the current element.
Ui. Position-indicates the coordinate value object {top, left} of the mouse relative to the current object}
Ui. offset-indicates the coordinate value object {top, left} of the mouse relative to the current page}
Ui. item-indicates the currently dragged Element
Ui. placeholder-placeholder (if defined)
Ui. Sender-sortable object to which the currently dragged element belongs (only useful when the element is passed from another sortable object)

· Parameter (Parameter Name: parameter type: default value)
Appendto: String: 'parent'
Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zindex issues ).
Initial: $ ('. selector'). sortable ({appendto: 'body '});
Get: var appendto = $ ('. selector'). sortable ('option', 'appendto ');
Settings: $ ('. selector'). sortable ('option', 'appendto', 'body ');

Axis: String: false
If any, the elements can be dragged either horizontally or vertically. Optional values: 'X' and 'y'
Initial: $ ('. selector'). sortable ({axis: 'X '});
Get: var axis = $ ('. selector'). sortable ('option', 'axis ');
Settings: $ ('. selector'). sortable ('option', 'axis ', 'x ');

Cancel: selector: ': input, click'
Prevents the sorting action from happening on the matching element.
Initial: $ ('. selector'). sortable ({cancel: 'click '});
Get: var cancel = $ ('. selector'). sortable ('option', 'cancel ');
Settings: $ ('. selector'). sortable ('option', 'cancel', 'click ');

Connectwith: selector: false
Allow the sortable object to connect to another sortable object. You can drag the item element to another object.
Initial: $ ('. selector'). sortable ({connectwith: '. otherlist '});
Get: var connectwith = $ ('. selector'). sortable ('option', 'connectwith ');
Settings: $ ('. selector'). sortable ('option', 'with with', '. otherlist ');

Containment: element, String, selector: false
A Restricted Sorting action can only take place 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', 'containing ');
Settings: $ ('. selector'). sortable ('option', 'containing', 'parent ');

Cursor: String: 'auto'
Defines the style of the sort action when it starts.
Initial: $ ('. selector'). sortable ({cursor: 'crosshair '});
Get: var cursor = $ ('. selector'). sortable ('option', 'cursor ');
Settings: $ ('. selector'). sortable ('option', 'cursor ', 'crosshair ');

Cursorat: object: false
When you start to move, the cursor is positioned at a certain position (up to two directions ). Optional values: {top, left, right, bottom }.
Initial: $ ('. selector'). sortable ({cursorat: 'top '});
Get: var cursorat = $ ('. selector'). sortable ('option', 'cursorat ');
Settings: $ ('. selector'). sortable ('option', 'cursorat', 'top ');

Delay: INTEGER: 0
In milliseconds, you can set the delay to activate the sort action. This parameter prevents accidental clicking.
Initial: $ ('. selector'). sortable ({delay: 500 });
Get: var delay = $ ('. selector'). sortable ('option', 'delay ');
Settings: $ ('. selector'). sortable ('option', 'delay', 500 );

Distance: INTEGER: 1
The sorting action is triggered only when the number of pixels to be dragged on the element is determined.
Initial: $ ('. selector'). sortable ({distance: 30 });
Get: var distance = $ ('. selector'). sortable ('option', 'distance ');
Settings: $ ('. selector'). sortable ('option', 'distance ', 30 );

Droponempty: Boolean: True
Whether to allow dragging to an empty sortable object.
Initial: $ ('. selector'). sortable ({droponempty: false });
Get: var droponempty = $ ('. selector'). sortable ('option', 'droponempty ');
Settings: $ ('. selector'). sortable ('option', 'droponempty', false );

Forcehelpersize: Boolean: false
If true, forces the helper to have a size.
Initial: $ ('. selector'). sortable ({forcehelpersize: true });
Get: var forcehelpersize = $ ('. selector'). sortable ('option', 'forcehelpersize ');
Settings: $ ('. selector'). sortable ('option', 'forcehelpersize', true );

Forceplaceholdersize: Boolean: false
If true, forces the placeholder to have a size.
Initial: $ ('. selector'). sortable ({forceplaceholdersize: true });
Get: var forceplaceholdersize = $ ('. selector'). sortable ('option', 'forceplaceholdersize ');
Settings: $ ('. selector'). sortable ('option', 'forceplaceholdersize', true );

Grid: array: false
The item element of the sorting object is treated as a grid. Each movement moves according to the size of a grid. array value: [x, y]
Initial: $ ('. selector'). sortable ({grid: [50, 20]});
Get: var grid = $ ('. selector'). sortable ('option', 'grid ');
Settings: $ ('. selector'). sortable ('option', 'grid', [50, 20]);

Handle: selector, element: false
The sorting restriction action can only start with an element in the item element.
Initial: $ ('. selector'). sortable ({handle: 'h2 ′});
Get: var handle = $ ('. selector'). sortable ('option', 'handle ');
Settings: $ ('. selector'). sortable ('option', 'handle', 'h2 ′);

Helper: String, function: 'original'
Sets whether to display a secondary element when dragging an element. Value Options: 'original' and 'clone'
Initial: $ ('. selector'). sortable ({helper: 'clone '});
Get: var helper = $ ('. selector'). sortable ('option', 'helper ');
Settings: $ ('. selector'). sortable ('option', 'helper ', 'clone ');

Items: selector: '> *'
Specifies which elements can be dragged and sorted in the sorting object.
Initial: $ ('. selector'). sortable ({items: 'lil '});
Get: var items = $ ('. selector'). sortable ('option', 'items ');
Settings: $ ('. selector'). sortable ('option', 'items ', 'lil ');

Opacity: float: false
Defines the transparency of the Helper element (helper) when sorting.
Initial: $ ('. selector'). sortable ({opacity: 0.6 });
Get: var opacity = $ ('. selector'). sortable ('option', 'opacity ');
Settings: $ ('. selector'). sortable ('option', 'opacity ', 0.6 );

Placeholdertype: stringdefault: false
Set the CSS style of the blank placeholder when the sorting action occurs.
Initial: $ ('. selector'). sortable ({placeholder: 'ui-state-highlight '});
Get: var placeholder = $ ('. selector'). sortable ('option', 'placeholder ');
Settings: $ ('. selector'). sortable ('option', 'placeholder ', 'ui-state-highlight ');

Revert: Boolean: false
If it is set to true, the dragged element will have an animation effect when returning a new position.
Initial: $ ('. selector'). sortable ({revert: true });
Get: var revert = $ ('. selector'). sortable ('option', 'revert ');
Settings: $ ('. selector'). sortable ('option', 'revert', true );

Scroll: Boolean: True
If it is set to true, the elements will automatically scroll when they are dragged to the edge of the page.
Initial: $ ('. selector'). sortable ({scroll: false });
Get: var scroll = $ ('. selector'). sortable ('option', 'scroll ');
Settings: $ ('. selector'). sortable ('option', 'scroll ', false );

Scrollsensiti.pdf: INTEGER: 20
Sets the number of pixels when an element moves to the edge, and the page starts to scroll.
Initial: $ ('. selector'). sortable ({scrollsensiti.pdf: 40 });
Get: var scrollsensitivity = $ ('. selector'). sortable ('option', 'scrollsensitification ');
Settings: $ ('. selector'). sortable ('option', 'scrollsensitification', 40 );

Scrollspeed: INTEGER: 20
Set the page scroll speed.
Initial: $ ('. selector'). sortable ({scrollspeed: 40 });
Get: var scrollspeed = $ ('. selector'). sortable ('option', 'scrollspeed ');
Settings: $ ('. selector'). sortable ('option', 'scrollspeed', 40 );

Tolerance: String: 'intersect'
Set the number of elements that are dragged across other elements to be re-ordered. Value Options: 'intersect 'and 'pointer'
Intersect: at least 50% overlapping
Pointer: overlapping elements of the mouse pointer
Initial: $ ('. selector'). sortable ({tolerance: 'pointer '});
Get: var tolerance = $ ('. selector'). sortable ('option', 'tolerance ');
Settings: $ ('. selector'). sortable ('option', 'tolerance ', 'pointer ');

Zindex: INTEGER: 1000
Set the Z-index value of the element when the sorting action occurs.
Initial: $ ('. selector'). sortable ({zindex: 5 });
Get: var zindex = $ ('. selector'). sortable ('option', 'zindex ');
Settings: $ ('. selector'). sortable ('option', 'zindex', 5 );

· Events

Start
This event is triggered when the sort action starts.
Definition: $ ('. selector'). sortable ({start: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortstart', function (event, UI ){... });

Sort
This event is triggered when elements are sorted.
Definition: $ ('. selector'). sortable ({sort: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sort ', function (event, UI ){... });

Change
This event is triggered when the elements are sorted and the coordinates have changed.
Definition: $ ('. selector'). sortable ({change: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortchange', function (event, UI ){... });

Beforestop
This event is triggered before the sorting action ends. The placeholder element and auxiliary element are still valid.
Definition: $ ('. selector'). sortable ({beforestop: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortbeforestop', function (event, UI ){... });

Stop
This event is triggered when the sorting action ends.
Definition: $ ('. selector'). sortable ({stop: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortstop', function (event, UI ){... });

Update
This event is triggered when the sorting action ends and the element coordinates have changed.
Definition: $ ('. selector'). sortable ({update: function (event, UI ){... }});
Binding: $ ('. 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 ){... }});
Binding: $ ('. selector'). BIND ('sortreceive ', function (event, UI ){... });

Over
This event is triggered when an element is dragged into another sortable object.
Definition: $ ('. selector'). sortable ({over: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortover ', function (event, UI ){... });

Out
This event is triggered when an element is dragged out of a sortable object and enters another sortable object.
Definition: $ ('. selector'). sortable ({out: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortout', function (event, UI ){... });

Activate
When a sortable object with a connection starts sorting, all allowed sortables trigger this event.
Definition: $ ('. selector'). sortable ({activate: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortactivate', function (event, UI ){... });

Deactivate
When a sortable object with a connection ends the sorting action, all allowed sortables trigger this event.
Definition: $ ('. selector'). sortable ({deactivate: function (event, UI ){... }});
Binding: $ ('. selector'). BIND ('sortdeactivate', function (event, UI ){... });

· Method
Destory
Remove the drag and drop feature from the element.
Usage:. sortable ('deststroy ')

Disable
Disable drag and drop of elements.
Usage:. sortable ('disable ')

Enable
Enable drag and drop of elements.
Usage:. sortable ('enable ')

Option
Obtains or sets the parameters of an element.
Usage:. sortable ('option', optionname, [value])

Serialize
Obtains or sets the ID attribute of each serialized item element.
Usage:. sortable ('serialize', [Options])

Toarray
Gets the ID attribute array of each serialized item element.
Usage:. sortable ('toarray ')

Refresh
Manually refresh the sorting of item elements of the current sortable object.
Usage:. sortable ('refresh ')

Refreshpositions
Manually refresh the coordinates of the item element of the current sortable object. This method may reduce the performance.
Usage:. sortable ('refreshposition ')

Cancel
Cancels the sorting change of item elements in the current sortable object.
Usage:. sortable ('cancel ')