Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні у нас на черзі плагін Sortable. Насправді це не jQuery плагін, і його автор особливо акцентує увагу на тому факті, що плагін не використовує jQuery. Тим не менш плагін мені припав до душі, і я вирішив поділитися їм з вами.
Як ви, напевно, вже здогадалися з назви плагіна — Sortable — він пов’язаний з сортуванням. Фактично плагін є клоном відомого однойменного плагіна Sortable з комплекту бібліотеки jQuery UI. При цьому це дуже вдалий клон.
Можливості та переваги плагіна Sortable описані на його сторінці на GitHub.
Як бачимо, тут і підтримка всіх сучасних браузерів (включаючи навіть несучасний IE9), і підтримка дотиків на смартфонах, і використання нового API drag&drop HTML5 і багато іншого.
Але давайте перейдемо від слів до справи. Завантажити плагін та підключимо його до нашої сторінці.
Тепер створимо довільний список елементів:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Залишилося лише вибрати створений список і передати його параметром плагіну.
var el = document.getElementById(‘items’);
Sortable.create(el);
Як бачимо, тепер сортуються елементи списку і їх можна міняти місцями. Плагін пропонує нам та інші можливості реалізації, наприклад, ми можемо сортувати не тільки окремі елементи блоку, але і самі блоки, міняючи їх місцями один з одним.
Ну а у мене на цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!
