All event callback functions have two parameters: event and UI, browser own 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 relative current object, the mouse's coordinate value object {Top,left}
Ui.offset-Represents the mouse's coordinate value object {Top,left} relative to the current page
Ui.item-Represents the currently dragged element
Ui.placeholder-placeholder (if defined)
Ui.sender-the sortable object to which the element is currently dragged (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 that moves and the mouse is 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 value: ' 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 a matching element.
Initial: $ ('. Selector '). Sortable ({cancel: ' button '});
Get: var cancel = $ ('. Selector '). Sortable (' option ', ' Cancel ');
Set: $ ('. Selector '). Sortable (' option ', ' Cancel ', ' button ');
ConnectWith:Selector:false
Allows the 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 constraint 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 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 moving, the mouse is positioned at a location (up to two directions). Optional value: {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
In milliseconds, set how long to delay before activating the sort action. This parameter prevents late hitting.
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 are at least dragged above 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
Is it permissible to drag and drop it 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 have 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 have a size.
Initial: $ ('. Selector '). Sortable ({forceplaceholdersize:true});
Get: var forceplaceholdersize = $ ('. Selector '). Sortable (' option ', ' forceplaceholdersize ');
Set: $ ('. Selector '). Sortable (' option ', ' forceplaceholdersize ', true);
Grid:Array:false
Treats the item element of the sort object as a grid processing, moving each move by a grid size, 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
Restricting the sort action 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 value: ' 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 a secondary element (helper) displays 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 for a blank placeholder when a 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 animation effect when it returns to its new location.
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 scrolled automatically 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 the page to start scrolling when the element is moved to the edge of the number of pixels.
Initial: $ ('. Selector '). Sortable ({scrollsensitivity:40});
Get: var scrollsensitivity = $ ('. Selector '). Sortable (' option ', ' scrollsensitivity ');
Set: $ ('. Selector '). Sortable (' option ', ' scrollsensitivity ', 40);
Scrollspeed:integer:20
Sets the speed at which the page scrolls.
Initial: $ ('. Selector '). Sortable ({scrollspeed:40});
Get: var scrollspeed = $ ('. Selector '). Sortable (' option ', ' scrollspeed ');
Set: $ ('. Selector '). Sortable (' option ', ' scrollspeed ', 40);
Tolerance:string: ' intersect '
Sets the element to reorder when the dragged element crosses other elements. Optional value: ' intersect ', ' pointer '
Intersect: at least 50% overlap
Pointer: mouse pointer overlay element
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) {...}});
Binding: $ ('. Selector '). Bind (' Sortstart ', function (event, UI) {...});
Sort
This event is triggered when the element has been sorted.
Definition: $ ('. Selector '). Sortable ({Sort:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' sort ', function (event, UI) {...});
Change
This event is triggered when the element has been 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 sort action ends. Both the placeholder element and the secondary element are still valid at this time.
Definition: $ ('. Selector '). Sortable ({Beforestop:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Sortbeforestop ', function (event, UI) {...});
Stop
This event is triggered when the sort action ends.
Definition: $ ('. Selector '). Sortable ({Stop:function (event, UI) {...}});
Binding: $ ('. 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) {...}});
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 and moved 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 and moved out of the sortable object and into another sortable object.
Definition: $ ('. Selector '). Sortable ({Out:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Sortout ', function (event, UI) {...});
Activate
This event is triggered by all allowed sortable when a sort action is started with a sortable object that uses a connection.
Definition: $ ('. Selector '). Sortable ({Activate:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Sortactivate ', function (event, UI) {...});
Deactivate
When a sortable object with a connection ends the sort action, all allowed sortable trigger this event.
Definition: $ ('. Selector '). Sortable ({Deactivate:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Sortdeactivate ', function (event, UI) {...});
• methods
Destory
Removes drag-and-drop functionality from the element.
Usage:. Sortable (' Destroy ')
Disable
Disables drag-and-drop functionality for elements.
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 attribute of each item element after serialization.
Usage:. Sortable (' Serialize ', [options])
ToArray
Gets an array of the ID attributes of each item element after serialization.
Usage:. Sortable (' ToArray ')
Refresh
Manually refreshes the sorting of the item element for the current sortable object.
Usage:. Sortable (' Refresh ')
Refreshpositions
Manually refreshing the coordinates of the item element for the current sortable object, this method may degrade performance.
Usage:. Sortable (' refreshpositions ')
Cancel
Cancels the sort change of the item element in the current sortable object.
Usage:. Sortable (' Cancel ')
There are two ways to save a sort, one is a cookie, the other is a database configuration file, and so on.
Here is some of the original code for the database:
Copy Code code as follows:
$ (function () {
var show = $ (". Loader");
var orderlist = $ (". OrderList");
var listleft = $ ("Div[id = ' column_left ']");
var Listcenter = $ ("Div[id = ' column_center ']");
var listright = $ ("Div[id = ' column_right ']");
$ (". Column"). Sortable ({
opacity:0.5,//Drag Transparency
Revert:true,//Buffering effect
Cursor: ' move ',//drag when mouse style
Connectwith: ". Column",
Start with update results two times, waste resources, ancient changed to stop
But the stop is also executed when the element does not change position.
Use update other JS will have a problem, ^_^
Stop:function () {
var new_order_left = []; Left column Layout
var new_order_center = [];//in column layout
var new_order_right = [];//right Column 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-side handlers
Data: {leftid:newleftid, Centerid:newcenterid, Rightid:newrightid},//id: New arrangement corresponding to Id,order: original order
Beforesend:function () {
Show.html ("being updated");
// },
Success:function (msg) {
Alert (msg);
Show.html ("");
}
});
}
});
