jQuery Plugin To Add Sort Animation To jQuery UI Sortable

File Size: 6.2 KB
Views Total: 7688
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>

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


  animation: 150 // default: 0




  • fixed: empty connected llst


  • lil sortable dependency fix


  • fix widget namespace, added check for axis option


  • 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.