Detailed explanation of drag method example of jquery sortable_jquery

All event callback functions have two parameters: event and ui, the browser's own event object, and the encapsulated ui object
ui.helper - a JQuery object representing the sortable element, usually a clone of the current element
ui.position - represents the coordinate value object {top,left} of the mouse relative to the current object
ui.offset - represents the coordinate value object {top,left} of the mouse 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 currently dragged element belongs (only if the element is passed from another sortable object Useful when needed)

·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 set, 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');
Settings: $('.selector').sortable('option', 'axis', 'x');

cancel : Selector : ':input,button'
Prevents sorting actions from happening on matching elements.
Initial: $('.selector').sortable({ cancel: 'button' });
Get: var cancel = $('.selector').sortable('option', 'cancel') ;
Settings: $('.selector').sortable('option', 'cancel', 'button');

connectWith : Selector : false
Allows a sortable object to connect to another sortable Object, item elements can be dragged into another.
Initial: $('.selector').sortable({ connectWith: '.otherlist' });
Get: var connectWith = $('.selector').sortable('option', 'connectWith' );
Settings: $('.selector').sortable('option', 'connectWith', '.otherlist');

containment : Element, String, Selector : false
Constraint Sorting actions can only occur 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');
Setting: $('.selector').sortable('option', 'containment', 'parent') ;

cursor : String : 'auto'
Define the style if when starting the sorting action.
Initial: $('.selector').sortable({ cursor: 'crosshair' });
Get: var cursor = $('.selector').sortable('option', 'cursor') ;
Settings: $('.selector').sortable('option', 'cursor', 'crosshair');

cursorAt : Object : false
Mouse positioning when starting to move 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, set the delay before activating the sorting action. This parameter prevents accidental clicks.
Initial: $('.selector').sortable({ delay: 500 });
Get: var delay = $('.selector').sortable('option', 'delay');
Settings: $('.selector').sortable('option', 'delay', 500);

distance : Integer : 1
After deciding at least how many pixels to drag above the element , the sorting action is officially triggered.
Initial: $('.selector').sortable({ distance: 30 });
Get: var distance = $('.selector').sortable('option', 'distance');
Settings: $('.selector').sortable('option', 'distance', 30);

dropOnEmpty: Boolean: true
Whether dragging into an empty sortable object is allowed .
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
Treat the item element of the sorted object as a grid. , each move moves by one grid size, 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
Limit the sorting action to only start on a certain 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'
Whether the setting is When an element is dragged, an auxiliary element is displayed. Optional values: 'original', 'clone'
Initial: $('.selector').sortable({ helper: 'clone' });
Get: var helper = $('.selector') .sortable('option', 'helper');
Settings: $('.selector').sortable('option', 'helper', 'clone');

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

opacity : Float : false
Define the auxiliary element when sorting (helper) Display transparency.
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 blank placeholder when the sorting action occurs CSS styles.
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 set to true, the dragged element will have an animation effect when it returns to its new position.
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 dragged to It will automatically scroll when you reach 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
Set how many pixels the element moves to the edge. Start scrolling the page.
Initial: $('.selector').sortable({ scrollSensitivity: 40 });
Get: var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
Settings: $('.selector').sortable('option', 'scrollSensitivity', 40);

scrollSpeed ​​: Integer : 20
Set the speed of page scrolling.
Initial: $('.selector').sortable({ scrollSpeed: 40 });
Get: var scrollSpeed ​​= $('.selector').sortable('option', 'scrollSpeed');
Settings: $('.selector').sortable('option', 'scrollSpeed', 40);

tolerance : String : 'intersect'
Set how much the dragged element exceeds other elements elements are reordered. Optional values: 'intersect', 'pointer'
intersect: overlap at least 50%
pointer: mouse pointer overlaps elements
Initial: $('.selector').sortable({ tolerance: 'pointer' });
Get: var tolerance = $('.selector').sortable('option', 'tolerance');
Set: $('.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);


·Event

start
When the sorting action starts This event is triggered when.
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. Placeholder elements and helper elements 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 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 from 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 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 object with a connection starts sorting action, all allowed sortables trigger this event.
Definition: $('.selector').sortable({ activate: function(event, ui) { ... } });
Binding: $('.selector').bind('sortactivate ', function(event, ui) { ... });

deactivate
When a connected sortable object 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 drag functionality from the element.
Usage: .sortable( 'destroy' )

disable
Disable the dragging function of the element.
Usage: .sortable( 'disable' )

enable
Enable the dragging function of the element.
Usage: .sortable( 'enable' )

option
Gets or sets the parameters of the element.
Usage: .sortable( 'option' , optionName , [value] )

serialize
Get or set the id attribute of each item element after serialization.
Usage: .sortable( 'serialize' , [options] )

toArray
Get the array of the id attribute of each item element after serialization.
Usage: .sortable( 'toArray' )

refresh
Manually refresh the sorting of the 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 performance.
Usage: .sortable( 'refreshPositions' )

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


There are two ways to save after sorting, one is cookie, the other is database configuration file, etc.

The following is part of the code of the database. Original work:

Copy code The code is 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 Mouse style when moving
connectWith: ".column",
//Start using update and execute the result twice, which is a waste of resources. Now change it to stop
//But stop also works when the element has not changed its position. It will be executed,
//There will be problems with other js using update, ^_^
stop: function(){
var new_order_left = []; //Left column layout
var new_order_center = [] ;//Middle 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 handler
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id: ID corresponding to the new arrangement, order: original arrangement order
// beforeSend: function( ) {
// show.html("Updating");
// },
success: function(msg) {
//alert(msg);
show.html ("");
}
});
}
});