Quicksand

Reorder and filter items with a nice shuffling animation.

Examples

Two different sets of HTML

Antonovka
Jonathan
McIntosh

JavaScript

$(function() {
  $('.button').click(function(e) {
    $('#source').quicksand( $('#destination li') );
    e.preventDefault();
  })
});

HTML

<p><a class="button" href="#dummy">Apples to oranges</a></p>

<ul id="source">
  <li data-id="anto">Antonovka</li>
  <li data-id="jonat">Jonathan</li>
  <li data-id="mac">McIntosh</li>
</ul>

<ul id="destination" style="display: none">
  <li data-id="blood">Blood orange</li>
  <li data-id="pers">Persian orange</li>
  <li data-id="valen">Valencia orange</li>
</ul>