Сортировка элементов.

Сортировка элементов

Взаимодействие Sortable позволяет изменять порядок расположения элементов в наборе путем их перетаскивания из одного места в другое. Чтобы применить взаимодействие Sortable, следует выбрать элемент, содержащий отдельные объекты, которые вы хотите отсортировать, и вызвать метод sortable() . Соответствующий простой пример приведен ниже:

jQuery UI div.sortable { width: 100px; background-color: lightgrey; font-size: large; float: left; margin: 6px; text-align: center; border: medium solid black; padding: 10px;} $(function() { $("#sortContainer").sortable(); }); Элемент 1 Элемент 2 Элемент 3 Запустить пример

В этом примере мы создаем ряд элементов div и назначаем им класс sortable. Для создания взаимодействия мы выбираем родительский элемент div (атрибут id которого равен sortContainer) и вызываем метод sortable(). В результате мы получаем возможность менять порядок расположения трех элементов div путем их перетаскивания в новые позиции. Этот процесс проиллюстрирован на рисунке:

Здесь для демонстрации взаимодействия Sortable элемент под названием "Элемент 2" перетаскивается вправо в окне браузера. Как только он минует элемент под названием "Элемент 3", элементы переставляются и располагаются в новом порядке. В данном случае элемент перемещался на одну позицию, но ничто не мешает перетаскивать элементы сразу на несколько позиций.

Определение порядка сортируемых элементов

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

Ниже приведен пример вывода на консоль текущего порядка элементов после щелчка на кнопке:

... $(function() { $("#sortContainer").sortable(); $("Получить порядок").appendTo("body"); $("button").button().click(function() { var order = $("#sortContainer").sortable("toArray"); for (var i = 0; i < order.length; i++) { console.log("Position: " + i + " ID: " + order[i]); } }) }); ...

В результате щелчка на кнопке вызывается метод toArray, и содержимое результирующего массива выводится на консоль:

Настройка взаимодействия Sortable

Взаимодействие Sortable в значительной мере зависит от взаимодействия Draggable, описанного в предыдущей статье. Это означает, что все опции взаимодействия Draggable (такие, как axis или tolerance) с тем же эффектом могут применяться и для настройки взаимодействия Sortable. В связи с этим я не буду вновь подробно описывать все настройки и остановлюсь лишь на тех из них, которые свойственны лишь взаимодействию Sortable и чаще всего используются. Их перечень приведен в таблице ниже, а подробные описания содержатся в следующих разделах:

Свойства взаимодействия Sortable Свойство Описание

connectWith	Определяет другой сортируемый элемент-контейнер, с которым должна быть установлена связь, обеспечивающая возможность взаимного перемещения элементов между контейнерами. Значение по умолчанию - false; ему соответствует отсутствие таких связей
dropOnEmpty	Если эта опция равна false, то элементы не могут быть перемещены в связанный сортируемый контейнер, когда он пуст. Значение по умолчанию - true
items	Определяет селектор, устанавливающий, какие элементы будут сортируемыми. Значение по умолчанию "> *", оно соответствует выбору всех потомков элемента, для которого был вызван метод sortable()
placeholder	Определяет класс, который будет назначен элементу, созданному для заполнения позиции, занимаемой сортируемым элементом до его перемещения в новое расположение

Связывание сортируемых контейнеров между собой

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

Определив значения свойства connectWith для обоих элементов, можно сделать эту связь двухсторонней, как показано в примере ниже:

... div.sortable { width: 100px; background-color: lightgrey; font-size: large; margin: 4px; text-align: center; border: medium solid black; padding: 10px;} #fruitContainer {position: absolute; right:50px} #flowerContainer {position: absolute; left:50px} div.flower {background-color: lightgreen} $(function() { $("#fruitContainer").sortable({ connectWith: "#flowerContainer" }); $("#flowerContainer").sortable({ connectWith: "#fruitContainer" }); }); Яблоко Апельсин Банан Груша Астра Пион Лилия Орхидея Запустить пример

В этом примере создаются две группы элементов, и для контейнерного элемента каждой группы вызывается метод sortable(). Для связывания групп между собой используется опция connectWith. Результат представлен на рисунке:

Связывание перемещаемого элемента с сортируемым контейнером

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

... $(function() { $("#fruit_1").draggable({ connectToSortable: "#flowerContainer", helper: "clone" }); $("#flowerContainer").sortable(); }); Яблоко Астра Пион Лилия Орхидея Запустить пример

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

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

Выбор сортируемых элементов

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

... $(function() { $("div.flower:odd").css("background-color", "salmon") $("#flowerContainer").sortable({ items: ".flower:even" }); }); ... Запустить пример

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

Работая с опцией items, вы должны знать об одной особенности. Элемент, не соответствующий селектору, нельзя перетащить в новую позицию, если только перед этим он не был вытеснен со своей позиции другим элементом. Так, например, в приведенном примере если элемент "Астры" смещается в другую позицию и при этом принудительно смещает элемент "Пионы", будучи один раз вытесненным из своей начальной позиции, элемент "Пионы" приобретает способность к перемещению и сортировке, как если бы он соответствовал селектору, определяемому опцией items.

Стилевое оформление опустевшей позиции

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

... div.sortable { width: 100px; background-color: lightgrey; font-size: large; margin: 4px; text-align: center; border: medium solid black; padding: 10px;} #flowerContainer {position: absolute; left:50px} div.flower {background-color: lightgreen} .emptySpace {border: medium dotted red; height: 36px; margin: 4px} $(function() { $("#flowerContainer").sortable({ placeholder: "emptySpace" }); }); Астра Пион Лилия Орхидея Запустить пример

В этом примере я определил класс emptySpace, задающий высоту и размер полей, а также пунктирную границу красного цвета для элементов, к которым он применяется. Этот класс задается в качестве значения опции placeholder, и, как показано на рисунке, когда элемент перетаскивается, оставленному им пустому пространству присваивается класс emptySpace:

Методы взаимодействия Sortable

Для взаимодействия Sortable определены все стандартные методы jQuery UI плюс несколько дополнительных, являющихся специфическими для работы с сортируемыми элементами. Эти методы перечислены в таблице ниже:

Отмена результата последней сортировки

Метод cancel позволяет предотвращать участие элементов в сортировке. Этой возможностью не следует злоупотреблять, поскольку фактически она означает игнорирование действий, предпринимаемых пользователем. Если вы все же применяете метод cancel, то позаботьтесь о том, чтобы пользователь знал, почему так происходит. Пример использования метода cancel вместе с событием update приведен ниже. Событие update происходит тогда, когда пользователь отпускает кнопку мыши, перетащив элемент.

... div.sortable { width: 100px; background-color: lightgrey; font-size: large; margin: 4px; text-align: center; border: medium solid black; padding: 10px;} $(function() { $("#error").dialog({autoOpen: false, modal: true, title: "Ошибка!"}) $("#flowerContainer").sortable({ update: function() { var sortedItems = $("#flowerContainer").sortable("toArray"); if (sortedItems != "item_1") { $("#error").dialog("open") $("#flowerContainer").sortable("cancel") } } }); }); Ha первом месте должен быть "Король" Король Дама Валет 10 Запустить пример

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

События взаимодействия Sortable

Взаимодействие Sortable поддерживает все события, определенные для взаимодействия Draggable, которые были описаны в предыдущей статье. Кроме того, взаимодействие Sortable поддерживает ряд собственных событий, перечень которых приведен в таблице ниже:

События взаимодействия Sortable Событие Описание

change	Происходит при изменении позиции элемента в результате сортировки, выполненной пользователем
receive	Происходит при перемещении элемента в данный сортируемый элемент-контейнер из другого связанного сортируемого элемента-контейнера
remove	Происходит при перемещении элемента из данного сортируемого элемента-контейнера в другой связанный сортируемый элемент-контейнер
sort	Происходит при каждом перемещении мыши в процессе сортировки
update	Происходит при завершении перемещения элемента пользователем при условии, что порядок элементов был изменен

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

Свойства объекта ui взаимодействия Sortable Свойство Описание

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

Пример использования объекта ui вместе с событиями sort и change приведен ниже:

Запустить пример jQuery UI div.sortable {width: 100px; background-color: lightgrey; font-size: large; margin: 4px; text-align: center; border: medium solid black; padding: 10px;} #flowerContainer {position: absolute; left:10px} #info {position: absolute; right: 10px; border: medium solid black; padding: 4px} div.flower {background-color: lightgreen} $(function() { $("#flowerContainer").sortable({ sort: function(event, ui) { $("#itemId").text(ui.item.attr("id")) }, change: function(event, ui) { $("#pos").text($("#flowerContainer *").index(ui.placeholder)) } }); }); Астра Пион Лилия Орхидея ID элемента: не определено Позиция: не определено

Здесь события используются для отображения информации о выполняемой операции сортировки. Функция-обработчик события sort считывает значение свойства ui.item и получает значение атрибута id перемещаемого элемента. Обработчик события change считывает значение свойства ui.placeholder и использует метод index для вычисления позиции заместителя элемента среди сортируемых элементов.

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

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

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

1 2 3

< link type= "text/css" href= "css/sunny/jquery-ui-1.7.2.custom.css" rel= "stylesheet" /> < script src= "js/jquery-1.3.2.min.js" type= "text/javascript" > < script src= "js/jquery-ui-1.7.2.custom.min.js" type= "text/javascript" >

Здесь мы подключили файл стилей 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-разметку. Пусть у нас она будет выглядеть так:

1 2 3 4 5 6 7 8 9

< ul id= "sortable" > < li class = "ui-state-default" > Item 1 < li class = "ui-state-default" > Item 2 < li class = "ui-state-default" > Item 3 < li class = "ui-state-default" > Item 4 < li class = "ui-state-default" > Item 5 < li class = "ui-state-default" > Item 6 < li class = "ui-state-default" > Item 7

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

1 2 3

$(function () { $("#sortable" ) .sortable () ; } ) ;

Демо примера

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

1 2 3 4 5 6

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 } ) ; } ) ;

Демо примера

Опция 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:
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. Пример использования одного из возможных событий плагина приведен в следующем примере:

1 2 3 4 5 6 7 8 9

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 , stop : function (event, ui) { alert (event.type ) ; } } ) ; } ) ;

Демо примера

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

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

1 2 3 4 5 6 7 8 9 10

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 , helper: "clone" , change: function (event, ui) { ui.helper .css ("color" , "#f00" ) ; } } ) ; } ) ;

Демо примера

Мы использовали опцию 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-разметку:

1	< button id= "cancelSort" > Cancel Sort

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

1 2 3 4 5 6 7 8 9

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 } ) ; $("#cancelSort" ) .click (function () { $("#sortable" ) .sortable ("cancel" ) ; } ) ; } ) ;

Демо примера

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

Но конечно, этот метод не единственный. Вот другие:
destroy – .sortable(‘destroy’) полностью удаляет всю функциональность плагина Sortable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .sortable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .sortable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .sortable(‘option’, optionName, ) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
serialize – .sortable(’serialize’, ) упорядочивает значение атрибутов 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.

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

1 2 3 4 5 6

$(function () { $("#sortable1, #sortable2" ) .sortable ({ connectWith: ".connectedSortable" , tolerance: "pointer" } ) ; } ) ;

Демо примера

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

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

Встала задача отсортировать таблицу на яваскрипте по любому столбику. Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт. Вот, что получилось через час:

Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем.

Первым делом нужно присвоить идентификаторы каждой строчке таблицы. Это лучше сделать сразу на сервере при выводе таблицы:

...

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

Сортировка массива

В интернете можно найти решения, где таблица целиком переводится в многомерный массив, а затем этот массив сортируется, после чего формируется и выводится новая таблица на место старой. Однако мне этот способ показался слишком громоздким, ведь достаточно держать в памяти всего два столбика:
1) по которому происходит сортировка,
2) столбик идентификаторов.

Можно обойтись простым массивом (ключ => значение), где ключ отвечает за номер строки. Но лично мне проще использовать двумерный массив, чтобы не запутаться между ключами и значениями.

На примере моей таблицы:

А первые значения массива указывают, в каком порядке будут идти строки отсортированной таблицы.

Кстати, данный метод аналогичен сортировке в MySQL с использованием вре́менных таблиц.

Во временный массив желательно класть подготовленные значения, которые быстро и легко сравнивать. Лишнее (тэги и css) надо отбросить, отформатированные числа перевести в обычные числа (20 000 → 20000), а строки можно превратить в некие эквиваленты. Например, в моём случае единственный текстовый столбик содержит только два слова: свободен и бронь . У них разная длина, а значит, во временный массив можно записать только длину слов — этого хватит для корректного сравнения.

var z=$(this).children("td").eq(i_s).html().split(" ").join(""); //убираем пробелы
if(isFinite(z)) {z=parseInt(z);} else {z=z.length;} //число остаётся числом, а у строк оставляем только длину

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

function sName(a,b) { //задаём функцию сравнения
if(a < b) {return (-1)*s_vozr;}
else if(a > b) {return s_vozr;}
else {return 0;}
}

multi.sort(sName); //сортируем массив multi, указав функцию sName

Функция sName(a,b) возвращает −1, 0 или 1. Если умножить возвращаемое значение на −1, то это изменит направление сортировки (по возрастанию или по убыванию). Таким образом, при помощи параметра s_vozr можно управлять направлением сортировки (если повторно кликнули по столбцу, параметр s_vozr меняет знак).

Перестановка строк таблицы

Теперь надо как-то удалить старую таблицу и показать новую, отсортированную. Тесты я не проводил (буду благодарен за ссылки в комментариях), но почти уверен, что экономичнее перемещать небольшие кусочки данных (то есть строки), чем парсить заново всю таблицу. Если это и не оптимизировано сейчас, то в будущем перемещение элементов должно занимать меньше времени, чем удаление старых и обработка новых элементов; а в нашем случае речь идёт о вставке довольно большой таблицы.

Как переделать старую таблицу в новую, используя перемещение строк? Пройдёмся в цикле по нашему вре́менному массиву, перемещая нужные строчки таблицы в её конец.

От того, куда перемещать строки — в конец или в начало — очевидно, зависит получаемое направление сортировки. Но эффективнее их сдвигать именно в конец. А если нужно изменить направление сортировки, то лучше пройтись по массиву в обратную сторону (или изначально сформировать обратный массив).

Перемещение строки c нужным id в конец таблицы (jquery):

$("#id_строки").appendTo ($("#id_таблицы"));

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

$("#id_строки").detach() .appendTo ($("#id_таблицы"));

Я не разбираюсь, как jquery использует ресурсы; но скорее всего, лучше перемещать без предварительного удаления.

Благодарность автору сайта

Если Вы хотите поддержать проект, воспользуйтесь платформой Яндекс.Деньги — это конфиденциально и безопасно.

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

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

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

$(function () { $("#sortable" ) .sortable () ; } ) ;

Демо примера

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 } ) ; } ) ;

Демо примера

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 , stop : function (event, ui) { alert (event.type ) ; } } ) ; } ) ;

Демо примера

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

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 , helper: "clone" , change: function (event, ui) { ui.helper .css ("color" , "#f00" ) ; } } ) ; } ) ;

Демо примера

< button id= "cancelSort" > Cancel Sort

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

$(function () { $("#sortable" ) .sortable ({ placeholder: "ui-state-highlight" , opacity: 0.6 } ) ; $("#cancelSort" ) .click (function () { $("#sortable" ) .sortable ("cancel" ) ; } ) ; } ) ;

Демо примера

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

$(function () { $("#sortable1, #sortable2" ) .sortable ({ connectWith: ".connectedSortable" , tolerance: "pointer" } ) ; } ) ;