Плагин JQuery Sortable для сортировки списков

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

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Sortable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Sortable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве:

Здесь мы подключили файл стилей css/sunny/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Хотите использовать Ваше собственное оформление – пожалуйста, но в примере мы используем готовое. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Sortable и Draggable.

Смотрим HTML-разметку. Пусть у нас она будет выглядеть так:

и следующий javascript-код, который применит к выбранному элементу функциональность плагина Sortable.

Демо примера

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

Опция placeholder передает плагину имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение (или куда он может быть помещен), а опция opacity устанавливает прозрачность элемента во время перемещения. Значения остальных опций передаются плагину подобным образом.

appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего сортируемый элемент во время его перемещения.
axis – в качестве значения используется строка. Доступные значения ‘x’ или ‘y’. По умолчанию установлено false. Если определить эту опцию, сортируемые элементы смогут перемещаться только по вертикали или горизонтали.
cancel – в качестве значения используется селектор jQuery. Предотвращает сортировку, если она начинается на элементе, указанном в это опции. По умолчанию используется значение ‘:input,button’.
connectWith – в качестве значения принимает селектор jQuery, где можно указать другой сортируемый список, в который можно будет перемещать сортируемые элементы, таким образом, что они станут частью другого сортируемого списка.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент или строку. Примеры возможных значений: ‘parent’, ‘document’, ‘window’. По умолчанию – false.
cursor – строка, определяющая вид курсора в процессе перемещения элемента. По умолчанию установлено значение ‘auto’.
cursorAt – объект, который определяет положение указателя мыши во время перемещения элемента. Для задания координат используется комбинация одного или двух свойств из четырех возможных – ‘top’, ‘right’, ‘bottom’ и ‘left’. Например: {top: 10, left: 20} или {bottom: 5}. По умолчанию – false.
delay – число, указанное в этой опции, определяет отсрочку начала перемещения элемента. Указывается в миллисекундах. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 0.
distance – число в пикселах, определяющее расстояние, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), чтобы начался процесс перемещения элемента. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 1.
dropOnEmpty – по умолчанию используется значение true. В этом случае, если один из связанных списков пустой, в него можно перемещать элементы из другого списка. Если установить значение false, эта возможность будет запрещена.
grid – по умолчанию – false. Значением может быть массив из двух чисел, определяющий шаг сетки, по которой будет перемещаться сортируемый элемент. Например: grid: [20,20]
handle – по умолчанию установлено значение false. В качестве значения можно указать селектор jQuery или элемент. В этом случае процесс сортировки можно будет начать только в том случае, если левая клавиша мыши нажата в момент нахождения указателя мыши над элементом, определенным в этой опции.
helper – по умолчанию используется значение ‘original’. В этом случае, при сортировке, перемещаемый элемент представлен самим элементом. Другое возможное значение ‘clone’. В этом случае элемент при перемещении представлен своей копией.
items – в качестве значения используется селектор jQuery. По умолчанию установлено значение ‘> *’. Опция определяет, какие элементы, являющиеся элементами-потомками того элемента, с которым связана функциональность плагина, могут быть сортируемыми.
opacity – значение опции может изменяться от 0.01 до 1 и определяет прозрачность перемещаемого элемента. По умолчанию – false.
placeholder – имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение. Если значение опции не определено «пустая» позиция никак не оформляется.
revert – по умолчанию используется значение false. Если использовать значение true, то при перемещении элемента, после того, как будет отпущена клавиша мыши, элемент переместится на свою новую позицию с использованием плавного анимационного эффекта.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
tolerance – по умолчанию эта опция имеет значение ‘intersect’. При этом элемент, перемещаемый во время сортировки должен перекрыть любой другой сортируемый элемент как минимум на 50%, чтобы тот «освободил» занимаемое место. Другое возможное значение – ‘pointer’. При этом над сортируемым элементом должен оказаться только указатель мыши.
zIndex – число, которое определяет значение css-свойства z-index для элемента в момент его сортировки.

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


Здесь мы использовали только опцию stop, в которой определили функцию, которая будет вызвана в момент окончания сортировки. Функция может принимать два аргумента. Первый аргумент – объект события, второй – специальный объект ui, в свойствах которого можно обнаружить разнообразную полезную информацию. Но в приведенном примере мы используем только свойство type объекта события, чтобы вывести в окне предупреждения название события, вызвавшего нашу функцию.

А вот пример того, как можно использовать специальный объект ui:
Демо примера


Мы использовали опцию change, чтобы вызвать функцию в момент изменения положения сортируемого элемента. Внутри функции мы обращаемся к одному из свойств объекта ui – к свойству helper. Это свойство является объектом, который представляет перемещаемый элемент во время сортировки. Используя метод css(name,value) мы устанавливаем красный цвет шрифта на перемещаемом элементе. Но, как только этот элемент займет свое новое место в списке, цвет шрифта вернется к исходному значению. Догадались почему? Если нет, то обратите внимание на опцию helper. Установив значение clone в этой опции, мы использовали во время перемещения не сам исходный объект, а его копию.
Кстати, helper – это не единственное полезное свойство объекта ui, есть и другие:

ui.helper – объект, характеризующий элемент, находящийся в процессе перемещения;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;
ui.item – объект, представляющий сортируемый элемент;
ui.placeholder – объект, представляющий место, откуда был перемещен сортируемый элемент (или куда он будет перемещен);
ui.sender – объект, который представляет элемент-контейнер для сортируемых элементов, откуда сортируемый элемент был перемещен (при использовании связанных списков);

Ниже перечислены опции, связанные с событиями плагина Sortable, их довольно много:
Опция start – событие sortstart наступает в момент начала сортировки.
Опция sort – событие sort наступает постоянно в течение сортировки.
Опция change – событие sortchange наступает во время сортировки, но только в том случае, если изменилось положение сортируемого элемента в объектной модели документа.
Опция beforeStop – событие sortbeforeStop наступает в момент сортировки, перед ее окончанием (когда отпущена левая клавиша мыши).
Опция stop – событие sortstop наступает в момент окончания сортировки.
Опция update – событие sortupdate наступает в момент окончания сортировки, но только в том случае, если порядок сортируемых элементов был изменен.
Опция receive – событие sortreceive наступает, когда связанный сортируемый список принимает элемент из другого списка.
Опция remove – событие sortremove наступает, когда элемент покидает один связанный список, и перемещается в другой.
Опция over – событие sortover наступает, когда сортируемый элемент перемещен в связанный список.
Опция out – событие sortout наступает, когда сортируемый элемент перемещен из связанного списка.
Опция activate – событие sortactivate наступает при использовании связанных списков, для каждого связанного списка при начале процесса сортировки.
Опция deactivate – событие sortdeactivate наступает при использовании связанных списков, для каждого связанного списка при окончании процесса сортировки.

А теперь – методы плагина. С помощью методов можно управлять плагином после инициализации. Сначала добавим кнопочку в HTML-разметку:

и небольшой пример:

Демо примера


Метод .sortable(«cancel») использованный в примере, один из самых полезных методов плагина. Он позволяет отменить результат последней операции сортировки и вернуть элементы к предшествующему состоянию.
Обратите внимание на элемент button с идентификатором #cancelSort. С кнопкой связан обработчик события click, по которому и вызывается метод соответствующий метод.
Если Вы попробуете переместить один из элементов с писка на новое место, а затем нажать на кнопку cancelSort, список вернется в предыдущее состояние.

Но конечно, этот метод не единственный. Вот другие:
destroy – .sortable(‘destroy’) полностью удаляет всю функциональность плагина Sortable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .sortable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .sortable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .sortable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
serialize – .sortable(’serialize’, [option]) упорядочивает значение атрибутов id элементов сортируемого списка в строку, которую можно передать на сервер с помощью ajax-запроса. Предъявляет требования к формату записи значения атрибута id. Допустимые форматы: id=’name_number’ или id=’name-number’. В этом случае вид строки получается ‘name[]=number& name[]=number’. Вторым, необязательным параметром, можно передать объект. Возможные значения: ‘key’ – заменит часть ‘name[]‘ на необходимую Вам, ‘attribute’ – попробует получить значения из атрибута, отличного от id, ‘expression’ – можно использовать свое регулярное выражение.
toArray – .sortable(‘toArray’) упорядочивает значение атрибутов id элементов сортируемого списка в массив.
cancel – .sortable(‘cancel’) отменяет результат последней операции сортировки и возвращает элемент в состояние, предшествующее этой операции. Метод полезен при использовании в callback-функциях, связанных с событиями stop или receive.

Ну, и «на сладкое» – конечно обязательно надо дать пример использования связанных списков.
Демо примера


Я привел пример только javascript-кода, поскольку в HTML-коде страницы ничего особенного нет – просто два ненумерованных списка #sortable1 и #sortable2. С помощью javascript-кода мы сделаем их сортируемыми, указав их идентификаторы в селекторе jQuery и связав с ними функциональность Sortable. Самое главное заключается в использовании опции connectWith. Здесь мы указываем имя класса для того списка, который хотим сделать связанным с другим списком.
Обратите внимание, что атрибут class со значением connectedSortable мы присвоили обоим спискам и добились того, что элементы могут перемещаться не только из первого списка во второй, но и наоборот. Если бы мы захотели организовать только «одностороннее движение», скажем из первого списка во второй, мы бы присвоили класс connectedSortable только второму списку.

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