Перетаскиваемый список для сайта на jQuery | RUDEBOXПорой посетителю нужно дать немного свободы на сайте, чтобы он мог самостоятельно участвовать в жизни сайта, а именно передвигать элементы, изменяя позицию элементов на свое усмотрение. Такой подход отлично реализован на DLE, эту систему легко узнать по всплывающим модальным окнам которые можно перетаскивать по экрану. В данном уроке мы рассмотрим как реализовать список с возможностью выполнения аналогичных действий. Список будет реализован в темных тонах стилизованный небольшими элементами.

Принцип работы взят с jQuery UI Sortable. Данный плагин позволит вам группировать DOM для дальнейшей сортировки, что означает, что у вас будет возможность перемещать объект с одной позиции на другую. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо подключить все скрипты и стили, кроме этого мы будем использовать общие параметры стилей для нормализации всех стандартных DOM-стилей.

Далее нам необходимо организовать разметку. HTML-структура jQuery UI Sortable довольно гибкая. Мы можем использовать ‘div’ или ‘dt’, так как мы оборачиваем их в родительский элемент с указанными атрибутом id.

С разметкой мы разобрались, давайте перейдем к следующему шагу.

Перетаскиваемый список для сайта на jQuery | RUDEBOX

Шаг 2. CSS

Для списка мы будем использовать нестандартные шрифты, следовательно нам необходимо их подключить:

Далее нам необходимо определить позиционирование списка, и добавить небольшую хитрость:

Теперь нам необходимо добавить исходные стили для элементов ‘li’. Данные стили содержат в себе градационные цвета фона, длину элементов, границы, стили текста:

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

Теперь нам необходимо добавить иконку «movable», добавим мы ее при помощи псевдо-элемента :after и добавим необходимый нам шрифт:

Шаг 3. UI Sortable

Нам необходимо инициализировать плагин, для этого нам необходимо вызвать его следующей командой:

На данный момент UI Sortable уже должен работать. Вы можете кликнуть, задержать кнопку, и перетащить элемент в самый низ, или наоборот.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.