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
1 2 3 | <link rel="stylesheet" href="jquery-ui.min.css"> <script src="jquery-ui.min.js"></script> |
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
1 2 3 4 5 6 7 8 9 | <ul id="sortable_books"> <li>Book 1</li> <li>Book 2</li> <li>Book 3</li> <li>Book 4</li> <li>Book 5</li> <li>Book 6</li> </ul> |
In the js file we will add the following:
1 2 3 4 | $(function() { $('#sortable_books').sortable(); }); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul id="sortable_book1" class="sortable"> <li>Book 1</li> <li>Book 2</li> <li>Book 3</li> <li>Book 4</li> <li>Book 5</li> <li>Book 6</li> </ul> <ul id="sortable_book2" class="sortable"> <li>Book 7</li> <li>Book 8</li> <li>Book 9</li> <li>Book 10</li> <li>Book 11</li> <li>Book 12</li> </ul> |
And we just need to edit it in the js file as follows:
1 2 3 4 5 6 | $(function() { $( 'sortable_book1, #sortable_book2' ).sortable({ connectWith: 'stable' }); }); |
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:
1 2 3 4 5 6 7 | <ul id='sortable'> <li>Item 1</li> <li class="ui-disabled">(I'm not sortable or a drop target)</li> <li class="ui-disabled">(I'm not sortable or a drop target)</li> <li>Item 4</li> </ul> |
1 2 3 4 5 6 | $( function() { $( '#sortable' ).sortable({ items: 'li:not(.ui-disabled)' }); }); |
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:
1 2 3 4 5 6 7 | <ul id='sortable'> <li>Item 1</li> <li class="ui-disabled">(I'm not sortable or a drop target)</li> <li class="ui-disabled">(I'm not sortable or a drop target)</li> <li>Item 4</li> </ul> |
1 2 3 4 5 6 | $( function() { $( '#sortable' ).sortable({ cancel: '.ui-disabled' }); }); |
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!