Example of jquerysortable dragging method _ jquery

Source: Internet
Author: User
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 ("");
}
});
}
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.