This article describes the implementation of the jquerysortable drag method in an example. If you are interested, you can refer to the following two parameters for all event Callback functions: 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 ')
There are two methods to save after sorting: cookie and database configuration file.
The following is the original code of the database:
The Code is as follows:
$ (Function (){
Var show = $ (". loader ");
Var orderlist = $ (". orderlist ");
Var listleft = $ ("p [id = 'column _ left']");
Var listcenter = $ ("p [id = 'column _ Center']");
Var listright = $ ("p [id = 'column _ right']");
$ (". Column"). sortable ({
Opacity: 0.5, // transparency of the drag
Revert: true, // Buffer Effect
Cursor: 'move ', // mouse style when dragging
ConnectWith: ". column ",
// Start to execute the update result twice, wasting resources and changing it to stop
// But the stop command is executed when the element does not change its position,
// Other js updates may cause problems. ^ _ ^
Stop: function (){
Var new_order_left = []; // left bar Layout
Var new_order_center = []; // center layout
Var new_order_right = []; // right bar Layout
Listleft. children (". portlet"). each (function (){
New_order_left.push (this. title );
});
Listcenter. children (". portlet"). each (function (){
New_order_center.push (this. title );
});
Listright. children (". portlet"). each (function (){
New_order_right.push (this. title );
});
Var newleftid = new_order_left.join (',');
Var newcenterid = new_order_center.join (',');
Var newrightid = new_order_right.join (',');
$. Ajax ({
Type: "post ",
Url: jsonUrl, // server processing program
Data: {leftid: newleftid, centerid: newcenterid, rightid: newrightid}, // id: ID corresponding to the new arrangement, order: Original order
// BeforeSend: function (){
// Show.html ("Updating ");
//},
Success: function (msg ){
// Alert (msg );
Show.html ("");
}
});
}
});
