How to use the jquery drag-and-drop sorting plug-in Sortable

Source: Internet
Author: User

Sortable is a stand-alone JS plug-in, do not need jquery,sortable very lightweight, compressed only 2KB, suitable for modern browsers and mobile devices. The use of sortable can easily implement the mouse drag and drop sorting, allowing users to operate more convenient, with a strong experience.


Support for touch devices and modern browsers

Use the localized HTML5 API to drag

A simple API

Lightweight, compression is only 2 KB

No jquery required

How to use

Introduction of core files sortable

<script src= "Sortable.js" ></script>

Build HTML, not limited to 3, you can n


<ul id= "Items" >
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

Write JS initialization

var el = document.getElementById (' items ');
New sortable (EL);


New sortable (EL, {
Group: "Name",
Store:null,//@see Store
Handle: ". My-handle",//click on target element constraint start
Draggable: ". Item",//Specify which options need to be sorted
Ghostclass: "Sortable-ghost",

Onstart:function (/**EVENT*/EVT) {//drag
var Itemel = Evt.item;

Onend:function (/**EVENT*/EVT) {//drag
var Itemel = Evt.item;

Onadd:function (/**EVENT*/EVT) {
var Itemel = Evt.item;

Onupdate:function (/**EVENT*/EVT) {
var Itemel = Evt.item; The currently dragged HTML element

Onremove:function (/**EVENT*/EVT) {
var Itemel = Evt.item;


ToArray (): string[]

Serialize the options you want to sort into a character array

Sort (order:string[])

Sort elements by array

var order = Sortable.toarray ();

Sortable.sort (Order.reverse ()); Apply

Destroy ()

Saving and resuming sorting


New sortable (EL, {
Group: "Localstorage-example",
Store: {
* Get is the order of elements. Called once during initialization.
* @param {sortable} sortable
* @retruns {Array}
Get:function (sortable) {
var order = Localstorage.getitem (;
Return order? Order.split (' | '): [];

* Save the order of elements. Called every time on the drag end.
* @param {sortable} sortable
Set:function (sortable) {
var order = Sortable.toarray ();
Localstorage.setitem (, Order.join (' | '));

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: 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.