Learn about Sortable in jQuery

Tram Ho

1. About Sortable

Sortable is a jQuery library that lets you organize objects using an intuitive drag and drop interface. This feature has been around for a long time and is increasingly popular in web applications because they were created with the purpose of creating user-friendliness.

Sortable supports sorting in 1 lists and exchanging among lists. In addition, Sortable also supports disabled special items.

Here is the demo image

2. Install

To install Sortable, we only need to download the jQuery UI library via url http://jqueryui.com/download/ because they are already integrated into Jquery

Then we just need to link js and css into the page

Sortable is supported in the following browsers:

  • Firefox> = 3.5
  • Chrome
  • IE> 7
  • Safari> = 6
  • Opera
  • Konqueror

3. How to use

3.1 Drag and drop in a list

Below I will create a list of books. We will be able to drag items up and down in this list

In the js file we will add the following:

Okay, so we’ve created a simple example of sortable already. Let’s find out more about the next functions

3.2 Drag and drop in many different lists

In some cases we need to sort items from one list to another list item, so to do that, we go together to build 2 book lists as follows:

And we just need to edit it in the js file as follows:

Now we can easily arrange the items in 2 lists together

3.3 Disabled special items

In case there are some disabled items with a fixed position, we can only arrange items that are not disabled. Let’s see the following example:

In case there are some disabled items that do not have a fixed position, we can only arrange alternate items but cannot drag and drop the disabled items. Let’s take a look at the following example:

4. References

https://johnny.github.io/jquery-sortable/ http://jqueryui.com

Hopefully through this article I hope to be able to help you a bit more when working with organizing items in the list. Good luck!

Share the news now

Source : Viblo