От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы познакомимся с плагином Sortable библиотеки jQuery UI. Плагин Sortable позволяет сортировать элементы страницы простым их перетаскиванием.
В сегодняшней статье мы познакомимся с достаточно интересным плагином, который очень эффектно смотрится на страницах сайта. Речь идет о плагине Sortable, который, как следует из названия, работает с сортировкой элементов.
Часто данный плагин используется в административной части сайта, например для управления позицией пунктов меню. Вы просто перетаскиваете пункты меню на нужные позиции и вместе с этим будет изменяться позиция элементов меню на сайте. Это очень удобно и выглядит действительно эффектно. Если вы работали с CMS WordPress, тогда вы знаете о чем речь, поскольку там для меню как раз используется такой плагин.
Давайте и мы попробуем реализовать такой эффект сортировки на практике. Как обычно, начнем с верстки. Меню верстается списками, поэтому нам потребуется такой список.
|
1 2 3 4 5 6 7 |
<ul id="sort" > <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> |
Перед нами обычный список элементов:
А теперь используем метод sortable() выбранного плагина:
|
1 2 3 |
$(function(){ $('#sort').sortable(); }); |
И попробуем перетаскивать элементы списка мышью.
Как видим, у нас получилось перенести первый элемент в средину списка. Ну и чтобы список красиво смотрелся, мы можем добавить несколько классов фреймворка Bootstrap, тем самым оформив список.
|
1 2 3 4 5 6 7 |
<ul id="sort" class="list-group"> <li class="list-group-item"><a href="#">Item 1</a></li> <li class="list-group-item"><a href="#">Item 2</a></li> <li class="list-group-item"><a href="#">Item 3</a></li> <li class="list-group-item"><a href="#">Item 4</a></li> <li class="list-group-item"><a href="#">Item 5</a></li> </ul> |
Также неплохо было бы изменить вид курсора, тем самым давая понять, что элементы можно перетаскивать, сортировать.
|
1 |
.list-group-item{cursor: move;} |
Ну вот и все, сортировка элементов списка методом перетаскивания – готова. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
