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

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

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

В сегодняшней статье мы познакомимся с достаточно интересным плагином, который очень эффектно смотрится на страницах сайта. Речь идет о плагине Sortable, который, как следует из названия, работает с сортировкой элементов.

Часто данный плагин используется в административной части сайта, например для управления позицией пунктов меню. Вы просто перетаскиваете пункты меню на нужные позиции и вместе с этим будет изменяться позиция элементов меню на сайте. Это очень удобно и выглядит действительно эффектно. Если вы работали с CMS WordPress, тогда вы знаете о чем речь, поскольку там для меню как раз используется такой плагин.

Давайте и мы попробуем реализовать такой эффект сортировки на практике. Как обычно, начнем с верстки. Меню верстается списками, поэтому нам потребуется такой список.

<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>

Перед нами обычный список элементов:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

А теперь используем метод sortable() выбранного плагина:

$(function(){
 $('#sort').sortable();
});

И попробуем перетаскивать элементы списка мышью.

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

Как видим, у нас получилось перенести первый элемент в средину списка. Ну и чтобы список красиво смотрелся, мы можем добавить несколько классов фреймворка Bootstrap, тем самым оформив список.

<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>

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

Также неплохо было бы изменить вид курсора, тем самым давая понять, что элементы можно перетаскивать, сортировать.

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree