От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас на очереди плагин Sortable. На самом деле это не jQuery плагин, и его автор особо акцентирует внимание на том факте, что плагин не использует jQuery. Тем не менее плагин мне пришелся по душе, и я решил поделиться им с вами.
Как вы, наверное, уже догадались из названия плагина — Sortable — он связан с сортировкой. Фактически плагин является клоном небезызвестного одноименного плагина Sortable из комплекта библиотеки jQuery UI. При этом это весьма удачный клон.
Возможности и преимущества плагина Sortable описаны на его странице на GitHub.
Как видим, здесь и поддержка всех современных браузеров (включая даже несовременный IE9), и поддержка прикосновений на смартфонах, и использование нового API drag&drop в HTML5 и многое другое.
Но давайте перейдем от слов к делу. Скачаем плагин и подключим его к нашей странице.
|
1 |
<script src="js/Sortable.js"></script> |
Теперь создадим произвольный список элементов:
|
1 2 3 4 5 6 7 |
<ul class="list-group" id="items"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> <li class="list-group-item">Item 4</li> <li class="list-group-item">Item 5</li> </ul> |
Осталось лишь выбрать созданный список и передать его параметром плагину.
|
1 2 |
var el = document.getElementById('items'); Sortable.create(el); |
Как видим, теперь элементы списка сортируются и их можно менять местами. Плагин предлагает нам и другие возможности реализации, например, мы можем сортировать не только отдельные элементы блока, но и сами блоки, меняя их местами друг с другом.
Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
