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

Опубликовал: admin Monday, July 15, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Для решения этой задачи воспользуемся плагином Sortable (листинг 18.5.1). Для оформления выберем тему "sunny".

Листинг 1 8 .5 .1 . Использование плагина Sortable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-2</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding:
0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable();
});
</script>
</head>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-18-5-2</title>

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#sortable li { margin: 0 3px 3px 3px; padding:

0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

#sortable li span { position: absolute; margin-left: -1.3em; }

</style>

$(function(){

$("#sortable").sortable();

});

</script>

</head>

</ul>

</body>

</html>

Обсуждение

Итак, сначала мы подключили файл стилей css/sunny/jquery-ui-1.8.9.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui-1.8.9.custom.min.js, в котором объединена функциональность ядра UI и плагина Sortable. За связь плагина с HTML-разметкой отвечает фрагмент кода, приведенный в листинге 18.5.2.

Листинг 1 8 .5 .2 . Использование плагина Sortable

[code language=”javascript”]

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

Листинг 1 8 .5 .3 . Использование плагина Sortable

[code language=”javascript”]

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

Значения остальных опций передаются плагину подобным образом. Список доступных опций плагина Sortable приведен в табл. 18.13.

Таблица 18.13. Опции плагина Sortable

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность Sortable будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия
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, эта возможность будет запрещена
forceHelperSize	Значение по умолчанию — false. Установка значения true принудит хелпер иметь размеры

Таблица 18.13 (продолжение)

Опция	Описание
forsePlaceholderSize	Значение по умолчанию — false. Установка значения true потребует задать размеры того места списка, откуда элемент начал перемещение или куда он может быть помещен
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’. При этом над сортируемым элементом должен оказаться только указатель мыши

Таблица 18.13 (окончание)

Опция	Описание
zIndex	Число, которое определяет значение CSS-свойства z-index для элемента в момент его сортировки

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

Таблица 18.14. События плагина Sortable

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

Листинг 1 8 .5 .4 . Использование плагина Sortable

[code language=”javascript”]

В JavaScript-коде примера из листинга 18.5.4 мы с помощью опции stop определяем функцию, вызываемую в момент окончания сортировки. Функция может принимать два аргумента. Первый аргумент — объект события, второй — специальный объект ui, в свойствах которого можно обнаружить разнообразную полезную информацию.

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

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

Листинг 1 8 .5 .5 . Использование плагина Sortable

[code language=”javascript”]

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

Кстати, helper — это не единственное полезное свойство объекта ui, есть и другие:

❒ ui.helper — объект, характеризующий элемент, находящийся в процессе перемещения (обычно клон ui.item);

❒ ui.position — объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;

❒ ui.offset — объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;

❒ ui.item — объект, представляющий сортируемый элемент;

❒ ui.placeholder — объект, представляющий место, откуда был перемещен сортируемый элемент или куда он будет перемещен;

❒ ui.sender — объект, который представляет элемент-контейнер для сортируемых элементов, откуда сортируемый элемент был перемещен (при наличии связанных списков).

Нам осталось познакомиться с теми методами, которые предоставляет плагин Sortable. Пример использования метода .sortable("cancel") приведен в листинге 18.5.6, а описания других методов плагина — в табл. 18.15.

Таблица 18.15. Методы плагина Sortable

Метод	Описание
destroy .sortable(‘destroy’)	Полностью удаляет всю функциональность плагина Sortable. Возвращает элементы в состояние, предшествующее инициализации
disable .sortable(‘disable’)	Временно запрещает использование всей функциональности плагина. Вновь разрешить ее можно с помощью метода enable
enable .sortable(‘enable’)	Разрешает всю функциональность плагина, если ранее она была запрещена методом disable
option .sortable(‘option’, optionName, [value])	С помощью этого метода можно установить значение любой опции плагина после инициализации
option .sortable(‘option’, optionName)	С помощью этого метода можно получить значение любой опции плагина после инициализации
widget .sortable(‘widget’)	С помощью этого метода можно получить доступ к объекту, который представляет собой сортируемый элемент
serialize .sortable(‘serialize’, [option])	Упорядочивает значение атрибутов id элементов сортируемого списка в строку, которую можно передать на сервер с помощью AJAX-запроса. Предъявляет требования к формату записи значения атрибута id. Допустимые форматы: id=’name_number’ или id=’namenumber’. В этом случае вид строки получается ‘name[]=number& name[]=number’. Вторым, необязательным параметром, можно передать объект. Возможные значения: ‘key’ — заменит часть ‘name[]’ на необходимую вам;

Таблица 18.15 (окончание)

Метод	Описание
	‘attribute’ — попробует получить значения из атрибута, отличного от id; ‘expression’ — можно использовать свое регулярное выражение
toArray .sortable(‘toArray’)	Упорядочивает значение атрибутов id элементов сортируемого списка в массив
cancel .sortable(‘cancel’)	Отменяет результат последней операции сортировки и возвращает элемент в состояние, предшествующее этой операции. Метод полезен при использовании в callback-функциях, связанных с событиями stop или receive

Листинг 1 8 .5 .6 . Использование плагина Sortable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-6</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding:
0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable({ placeholder: "ui-state-highlight", opacity: 0.6
});
$("#cancelSort").click(function(){
$("#sortable").sortable("cancel");
});
});
</script>
</head>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
<button id="cancelSort">Cancel Sort</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-18-5-6</title>

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#sortable li { margin: 0 3px 3px 3px; padding:

0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

#sortable li span { position: absolute; margin-left: -1.3em; }

</style>

$(function(){

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

});

$("#cancelSort").click(function(){

$("#sortable").sortable("cancel");

});

</script>

</head>

</ul>

<button id="cancelSort">Cancel Sort</button>

</body>

</html>

Метод .sortable("cancel"), пример которого приведен в листинге 18.5.6, наверное, один из самых полезных. Он позволяет отменить результат последней операции сортировки и вернуть элементы к предшествующему состоянию.

Обратите внимание на элемент button с идентификатором #cancelSort. С кнопкой связан обработчик события click, по которому и вызывается соответствующий метод.

Если вы попробуете переместить один из элементов списка на новое место, а затем нажать кнопку cancelSort, список вернется в предыдущее состояние.

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

Листинг 1 8 .5 .7 . Использование плагина Sortable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-7</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable1, #sortable2 { list-style-type: none; margin: 0 30px; padding:
0; width: 200px; float:left; }
#sortable1 li, #sortable2 li { margin: 0 3px 3px 3px; padding:
0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable1 li span, #sortable2 li span { position: absolute; margin-left: 1.3em; }
</style>
<script type="text/javascript">
$(function(){
$("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", tolerance: "pointer"
});
});
</script>
</head>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1 [1]</li>
<li class="ui-state-default">Item 2 [1]</li>
<li class="ui-state-default">Item 3 [1]</li>
<li class="ui-state-default">Item 4 [1]</li>
<li class="ui-state-default">Item 5 [1]</li>
<li class="ui-state-default">Item 6 [1]</li>
<li class="ui-state-default">Item 7 [1]</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1 [2]</li>
<li class="ui-state-default">Item 2 [2]</li>
<li class="ui-state-default">Item 3 [2]</li>
<li class="ui-state-default">Item 4 [2]</li>
<li class="ui-state-default">Item 5 [2]</li>
<li class="ui-state-default">Item 6 [2]</li>
<li class="ui-state-default">Item 7 [2]</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-18-5-7</title>

#sortable1, #sortable2 { list-style-type: none; margin: 0 30px; padding:

0; width: 200px; float:left; }

#sortable1 li, #sortable2 li { margin: 0 3px 3px 3px; padding:

0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

#sortable1 li span, #sortable2 li span { position: absolute; margin-left: 1.3em; }

</style>

$(function(){

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

});

</script>

</head>

</ul>

</ul>

</body>

</html>

В HTML-коде страницы, приведенной в листинге 18.5.7, ничего особенного нет — просто два ненумерованных списка #sortable1 и #sortable2. С помощью JavaScriptкода мы сделаем их сортируемыми, указав их идентификаторы в селекторе jQuery и связав с ними функциональность Sortable. Самое главное заключается в использовании опции connectWith. Здесь мы указываем имя класса для того списка, который хотим сделать связанным с другим списком.

Обратите внимание, что атрибут class со значением connectedSortable мы присвоили обоим спискам и добились того, что элементы могут перемещаться не только из первого списка во второй, но и наоборот. Если бы мы захотели организовать только "одностороннее движение", скажем, из первого списка во второй, то присвоили бы класс connectedSortable только второму списку.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

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

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply