Часто встречающаяся задача создания пользовательского интерфейса с возможностью сортировки элементов. Для наглядного представления сортируемых элементов больше всего подходят списки или таблицы. В данной статье рассмотрим как организовать сортировку элементов одного списка или нескольких списков.
Содержание
- jQuery UI Sortable
- Задача сортировки списков
- Особенности и настройки
- Пример #1
jQuery UI Sortable
Для решения этой задачи нам понадобятся библиотеки jQuery и jQuery UI. В библиотеке jQuery есть замечательный плагин Sortable, предназначенный для сортировки элементов списка с помощью мыши.
Задача сортировки списков
Для примера рассмотрим задачу сортировки элементов между тремя списками. Необходимая первоначальная разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="flex-container"> <div class="flex-rows low_range"> <h3>Список 1</h3> <ul class="ul_sortable"> <li>1-1</li> <li>1-2</li> <li>1-3</li> <li>1-4</li> <li>1-5</li> </ul> </div> <div class="flex-rows in_range"> <h3>Список 2</h3> <ul class="ul_sortable"> <li>2-1</li> <li>2-2</li> </ul> </div> <div class="flex-rows high_range"> <h3>Список 3</h3> <ul class="ul_sortable"> <li>3-1</li> <li>3-2</li> </ul> </div> </div> |
Итак, у нас есть три списка с классом ul_sortable . Со стилями более подробно можно ознакомиться в примере.
Для того чтобы все заработало, необходимо подключить скрипт со следующим содержимым:
|
1 2 3 |
$(document).ready(function(){ $('.ul_sortable').sortable() } |
Ничего сложного, ко всем элементам с классом ul_sortable подключаем метод sortable. После подключения этого скрипта, все элементы списков можно будет перетаскивать и сортировать, но только в пределах родительского списка. Для возможности перемещения элементов между различными списками необходимо в настройках метода указать параметр connectWith:
|
1 2 3 4 5 |
$(document).ready(function(){ $('.ul_sortable').sortable({ connectWith: '.ul_sortable', }); }) |
Параметр connectWith позволяет задать группу элементов в пределах которых возможно перемещение элементов и сортировка. Мы указали все списки, указав из общий класс ul_sortable.
Особенности и настройки
Данный плагин имеет множество настроек, ознакомиться с которыми вы можете на официальном сайту jQuery UI.
Для примера рассмотрим настройку привязки элемента при переносе и подсветку места назначения перемещаемого элемента.
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('.ul_sortable').sortable({ connectWith: '.ul_sortable', tolerance: "pointer", placeholder: "li-highlight" }); }) |
tolerance
Наш скрипт пополнилcя параметром tolerance, данный параметр влияет на привязку перемещаемых элементов. В нашем случае значение pointer указывает на то, что элемент будет перенесен на новое место, как-только указатель мыши пересечет границы нового местоположения и кнопка мыши будет отпущена. Альтернативное значение данного параметра intersect, в этом случае для перемещения элемента на новое местоположение необходима площадь пересечения переносимого элемента и места назначения не менее 50%.
placeholder
Также в скрипте указан параметр placeholder. Он позволяет подсвечивать новое местоположение элемента при переносе, пока кнопка мыши не отжата. Для этого необходимо указать класс со стилем элемента подсветки.
Пример #1
See the Pen
KOMygW by Paul (@1110000)
on CodePen.
