Топ плагинов jQuery. Плагин Sortable

Топ плагинов jQuery. Плагин Sortable

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас на очереди плагин Sortable. На самом деле это не jQuery плагин, и его автор особо акцентирует внимание на том факте, что плагин не использует jQuery. Тем не менее плагин мне пришелся по душе, и я решил поделиться им с вами.

Как вы, наверное, уже догадались из названия плагина — Sortable — он связан с сортировкой. Фактически плагин является клоном небезызвестного одноименного плагина Sortable из комплекта библиотеки jQuery UI. При этом это весьма удачный клон.

Возможности и преимущества плагина Sortable описаны на его странице на GitHub.

Топ плагинов jQuery. Плагин Sortable

Как видим, здесь и поддержка всех современных браузеров (включая даже несовременный IE9), и поддержка прикосновений на смартфонах, и использование нового API drag&drop в HTML5 и многое другое.

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

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

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

Но давайте перейдем от слов к делу. Скачаем плагин и подключим его к нашей странице.

<script src="js/Sortable.js"></script>

Теперь создадим произвольный список элементов:

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

Топ плагинов jQuery. Плагин Sortable

Осталось лишь выбрать созданный список и передать его параметром плагину.

var el = document.getElementById('items');
Sortable.create(el);

Топ плагинов jQuery. Плагин Sortable

Как видим, теперь элементы списка сортируются и их можно менять местами. Плагин предлагает нам и другие возможности реализации, например, мы можем сортировать не только отдельные элементы блока, но и сами блоки, меняя их местами друг с другом.

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&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