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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree