jQuery Plugin To Add Sort Animation To jQuery UI Sortable

File Size: 6.2 KB
Views Total: 7816
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Sort Animation To jQuery UI Sortable

A super tiny jQuery plugin that uses CSS3 transforms and transitions to add smooth sort animations to a drag'n'drop list based on jQuery UI sortable().

With a fallback to jQuery's animate when CSS3 animations are not supported in the old browsers.

How to use it:

1. Include the jquery.ui.sortable-animation.js script in your html page which has jQuery and jQuery UI installed.

<link rel="stylesheet" href="jquery-ui.min.css">
  ... 
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.sortable-animation.js"></script>

2. Create a sortable html list following the markup structure introduced here.

<ul id="sortable" class="sortable-container">
  <li class="sortable-item">Item 1</li>
  <li class="sortable-item">Item 2</li>
  <li class="sortable-item">Item 3</li>
  <li class="sortable-item">Item 4</li>
  <li class="sortable-item">Item 5</li>
  <li class="sortable-item">Item 6</li>
  <li class="sortable-item">Item 7</li>
</ul>

3. Call the function to enable the jQuery UI sortable on the html list and config the sort animation.

$('#sortable').sortable({

  animation: 150 // default: 0

});

Changelog:

2022-01-21

  • fixed: empty connected llst

2019-05-07

  • lil sortable dependency fix

2015-12-24

  • fix widget namespace, added check for axis option

2015-10-15

  • Add universal module definition pattern to be able to use the library with requirejs etc.

This awesome jQuery plugin is developed by egorshar. For more Advanced Usages, please check the demo page or visit the official website.