Example of a jquery sortable drag method

  This article as an example of the way to introduce a jquery sortable the implementation of the Drag method, interested friends can refer to the following

All event callback functions have two parameters: event and UI, browser own event object, and encapsulated UI object   Ui.helper-The JQuery object representing the sortable element, usually the clone 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 object {top,left}  Ui.item to the current page-represents the currently dragged element   Ui.placeholder-placeholder (if defined)   Ui.sender-current drag-and-drop element's owning sortable object (useful only if the element is passed from another sortable object)     Parameters (parameter name: argument 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 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& nbsp 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  constraint sort actions 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 if the sort action is started.   Initial: $ ('. Selector '). Sortable ({cursor: ' CrosshAir '} ';  get: var cursor = $ ('. Selector '). Sortable (' option ', ' cursor ');  settings: $ ('. Selector '). Sortable (' option ' , ' cursor ', ' crosshair ');    cursorat:object:false  When you begin to move, 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 = $ ('. Selec Tor '). Sortable (' option ', ' Cursorat ');  set: $ ('. Selector '). Sortable (' option ', ' Cursorat ', ' top ');    delay:integer:0  how long to set the delay before activating the sort action in milliseconds. This parameter prevents late hitting.   Initial: $ ('. Selector '). Sortable ({delay:500});  get: var delay = $ ('. Selector '). Sortable (' option ', ' delay ');   Settings: $ ('. Selector '). Sortable (' option ', ' delay ');    distance:integer:1  to determine at least how many pixels to drag above the element, To formally trigger the sort action.   Initial: $ ('. Selector '). Sortable ({distance:30});  get: var distance = $ ('. Selector '). Sortable (' option ', ' Distance ');  set: $ ('. Selector '). Sortable (' option ', ' distance ',);    droponempty:boolean:true  Is it permissible to drag and drop to an empty sortaThe BLE 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 forceplacehol Dersize = $ ('. Selector '). Sortable (' option ', ' forceplaceholdersize ');  set: $ ('. Selector '). Sortable (' option ', ' Forceplaceholdersize ', true ';    grid:array:false  treats the item element of the sort object as a lattice 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 ;    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 ');   Settings: $ ('. Selector '). Sortable (' option ', ' Handle ', ' H2 ');    helper:string, Function: ' Original '   settings Whether to display an auxiliary element when dragging the 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 '); nbsp Set: $ ('. Selector '). Sortable (' option ', ' Items ', ' Li ');    opacity:float:false  definition when sorting, auxiliary element (helper) The transparency displayed.   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 ');   Settings: $ ('. 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 ') ;  settings: $ ('. 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 ',);    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 ',);    tolerance:string: ' Intersect '   Sets the element to reorder when the dragged element crosses other elements. Optional value: ' intersect ', ' pointer '   intersect: at least overlap 50%  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  settings when the sort action occurs, The Z-index value of the element.   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  triggers this event when the element is sorted.   Definition: $ ('. Selector '). Sortable ({Sort:function (event, UI) {...}});   Binding: $ ('. Selector '). Bind (' sort ', function (event, UI) {...});     change  This event 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  triggers this event 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  triggers this event 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  triggers this event when an element drags and moves 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  When a sortable with a connection is usedThis event is triggered by all allowed sortable, like the start of a sort action.   Definition: $ ('. Selector '). Sortable ({Activate:function (event, UI) {...}});   Binding: $ ('. Selector '). Bind (' Sortactivate ', function (event, UI) {...});     deactivate  This event is triggered by all allowed sortable when a sortable object with a connection ends the sort action.   Definition: $ ('. Selector '). Sortable ({Deactivate:function (event, UI) {...}});   Binding: $ ('. Selector '). Bind (' Sortdeactivate ', function (event, UI) {...});       method   destory  removes drag-and-drop functionality from the element.   Usage:. Sortable (' Destroy ')     disable  Disable drag-and-drop functionality for elements.   Usage:. Sortable (' disable ')     enable  Enable drag-and-drop functionality for elements.   Usage:. Sortable (' Enable ')     option  Gets or sets the parameters of an 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 refresh the sort of item elements of the current sortable object.   Usage:. Sortable (' RefresH ')     refreshpositions  manually refreshes the coordinates of the item element for the current sortable object, which may degrade performance.   Usage:. Sortable (' refreshpositions ')     cancel  cancels the ordering change of the item element in the current sortable object.   Usage:. Sortable (' Cancel ')       Sort Save there are two methods, one is a cookie, the other is a database configuration file.     Below is part of the database code original:    code as follows: $ (function () {  var show = $ (". Loader");  var orderlist = $ (". or Derlist ");  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 time Mouse style   Connectwith: '. Column ', //start with update results two times, waste resources, old change to stop  /But the stop will also perform,  when the element does not change position///update other JS will have a problem, ^_^   stop:function () {  var new_order_left = []; Left column layout   var new_order_center = [];//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 ID, Order: Original arrangement  //beforesend:function () { //show.html ("Updating"); //},  success:function (msg) {&nbsp ; Alert (msg);  show.html (""); } }); } });