A lightweight jquery drag-and-drop sorting plug-in-HTML5 sortable

Date: 2012-7-26 Source: gbin1.com

Online Demo

Local download

If you mention drag-and-drop plug-ins, you will surely think of jquery UI. This UI class library contains almost all the components you need, but if you only want to use jquery
A component in the UI, for example, if you drag and drop a component, calling such a large class library will feel like a zombie. Today we will introduce a lightweight jquery drag and drop plug-in-

HTML5 sortable. It helps you create drag-and-drop lists and grid elements!

Main features

• Very small (compressed version 1 KB)
• Use the HTML5 local drag-and-drop API
• Supports list and grid layout
• Sorting plug-in similar to jquery UI
• Supports ie5.5 +, firefox3.5 +, chrome3 +, safari3 +, and opera12 +
• The API is compatible with jquery UI. You can use jquery UI as polyfill to support earlier browsers.

How to Use

Easy to use:

<ul class="gbsortable">    <li>Item 1    <li>Item 2    <li>Item 3    <li>Item 4</ul><script src="jquery.sortable.js"></script><script>    $('.gbsortable').sortable();</script> 

Main Parameters and Methods

Parameters:

• Items: Specifies the elements to be sorted.
• Connectwith: Create a list

Method:

• Sortupdate: Call A method after the order is changed. For example, save the new order after the order is changed.
• Disable: temporarily disable sorting.
• Enable: Enable the sorting function.
• Destroy: destroys the sorting function.

Source: a lightweight jquery drag-and-drop sorting plug-in-HTML5 sortable