Amigo Sorter

sorter-hand

У веб разработчиков часто возникает необходимость в сортировке элементов списка. На данной странице представлен наш jquery плагин amigo sorter, который позволяет производить сортировку элементов списка.

Скачать Amigo Sorter на github

Демонстрация работы плагина

1. Для нормальной работы необходимо подключить jquery: 

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

2. Подключаем файл стилей:

<link rel="stylesheet" href="css/theme-default.css">

Для изменения внешнего вида списка Вы можете изменить theme-default scss под свои нужды и затем перекомпилировать с помощью sass.

3. Подключаем плагин amigo sorter:

<script src="js/amigo-sorter.js"></script>

4. Создаем список, который будем сортировать:

<ul class="sorter">
 <li>
  <span>First Item</span>
 </li>
 <li>
  <span>Second Item</span>
 </li>
</ul>

5. Вызываем плагин для нашего контейнера "ul.sorter":

<script>
 $( function() {
  $('ul.sorter').amigoSorter();
 });
</script>

После этих манипуляций вы имеете возможность сортировать элементы списка мышью, а также прикосновениями на мобильных устройствах (пальцем).

Важное примечание!

В плагине реализована поддержка сортировка вложенных списков, пример структуры приведен ниже:

<ul class="sorter">
  <li>
    <span>Item 1</span>
    <ul class="sorter">
      <li>
        <span>Sub Item 1</span>
      </li>
      <li>
        <span>Sub Item 2</span>
      </li>
    </ul>
  </li>
  <li>
    <span>Item 2</span>
  </li>
</ul>

Обязательным условием является использование <span> тега внутри <li>.