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.