Бібліотека jQuery UI. Плагін Sortable

3

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми познайомимося з плагіном Sortable бібліотеки jQuery UI. Плагін Sortable дозволяє сортувати елементи сторінки простим їх перетягуванням.

У сьогоднішній статті ми познайомимося з досить цікавою плагіном, який дуже ефектно виглядає на сторінках сайту. Мова йде про плагіні Sortable, який, як випливає з назви, працює з сортуванням елементів.

Часто даний плагін використовується в адміністративній частині сайту, наприклад для управління позицією пунктів меню. Ви просто перетягуєте пункти меню на потрібні позиції і разом з цим буде змінюватися позиція елементів меню на сайті. Це дуже зручно і справді виглядає ефектно. Якщо ви працювали з CMS WordPress, тоді ви знаєте про що мова, оскільки там для меню як раз використовується такий плагін.

Давайте і ми спробуємо реалізувати такий ефект сортування на практиці. Як завжди, почнемо з верстки. Меню верстається списками, тому нам знадобиться такий список.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Перед нами звичайний список елементів:

Библиотека jQuery UI. Плагин Sortable

А тепер використовуємо метод sortable() обраного плагіна:

$(function(){
$(‘#sort’).sortable();
});

І спробуємо перетягувати елементи списку мишею.

Библиотека jQuery UI. Плагин Sortable

Як бачимо, у нас вийшло перенести перший елемент в середину списку. Ну і щоб список гарно виглядав, ми можемо додати декілька класів фреймворку Bootstrap, тим самим оформивши список.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Библиотека jQuery UI. Плагин Sortable

Також непогано було б змінити вигляд курсора, тим самим даючи зрозуміти, що елементи можна перетягувати, сортувати.

.list-group-item{cursor: move;}

Ну ось і все, сортування елементів списку методом перетягування – готова. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!