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

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

Решение

Для решения этой задачи используем плагин Draggable и тему оформления "le-frog" (листинг 18.1.1).

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

<!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-1-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/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">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
});
</script>
</head>
<body>
<p>Drag me around</p>
<button id="getOption">Get Option</button>
<button id="setOption">Set Option</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-1-1</title>

#draggable { width: 150px; height: 150px; padding: 0.5em; }

</style>

$(function(){

$("#draggable").draggable();

});

</script>

</head>

<body>

<p>Drag me around</p>

<button id="getOption">Get Option</button>

<button id="setOption">Set Option</button>

</body>

</html>

Обсуждение

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

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

[code language=”javascript”]

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

В листинге 18.1.3 мы попробуем передать плагину несколько настроек.

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

[code language=”javascript”]

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

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

Таблица 18.1. Опции плагина Draggable

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность Draggable будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия
addClasses	Значение по умолчанию — true. Если установить значение false, то это предотвратит добавление класса ui-draggable к перемещаемым элементам. Это может потребоваться из соображений оптимизации при вызове .draggable(), например, для нескольких сотен элементов
appendTo	Значение по умолчанию — parent. В ней можно передать селектор jQuery или элемент, который будет контейнером для объекта, представляющего перемещаемый элемент во все время его перемещения
axis	Вынуждает перетаскиваемый элемент перемещаться только по оси X или только по оси Y. Значение по умолчанию — false, что позволяет элементу перемещаться свободно

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

Опция	Описание
cancel	Значение по умолчанию — ‘input, option’. Если эти элементы находятся внутри перемещаемого элемента, то его нельзя захватить, при нахождении указателя мыши над определенными в этой опции элементами. Для выбора элементов служит селектор jQuery
connectToSortable	Разрешает "сброс" перемещаемых элементов в сортируемый (sortable) список. При этом "сброшенный" элемент становится частью списка. В качестве значения указывается селектор jQuery. Значение по умолча- нию — false. Для корректной работы необходимо дополнительная опция helper со значением ‘clone’
containment	Ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент, строку или массив. Примеры возможных значений: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2]
cursor	Строка, в которой может быть передано CSS-значение, определяющее значок для курсора в процессе перетаскивания элемента. По умолчанию — auto
cursorAt	При перемещении элемента устанавливает курсор в определенную позицию. Например, значение {left: 5, top: 10} при перемещении установит курсор в 10 пикселах от верхнего и в 5 пикселах от левого краев
delay	Отсрочка начала времени перемещения элемента в миллисекундах. Опция необходима для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. Значение по умолчанию — 0
distance	Расстояние в пикселах, на которое должен переместиться курсор при удерживаемой в нажатом положении левой кнопки мыши прежде, чем начнется перемещение элемента. Опция служит для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. Значение по умолчанию — 1
grid	Заставляет перетаскиваемый элемент перемещаться дискретно, по сетке, определяемой массивом передаваемых в опцию значений. Значение по умолчанию — false, что позволяет элементу перемещаться свободно. Пример передаваемого значения: [10, 10]
handle	В этой опции можно определить некоторый элемент, расположенный внутри перемещаемого элемента, только при нахождении над которым указателя мыши будет возможен захват элемента для перемещения. Для выбора элементов можно использовать селектор jQuery
helper	Возможные значения опции — ‘original’, ‘clone’, Function. Значение по умолчанию — ‘original’ (визуально наблюдается перемещение самого элемента). При значении ‘clone’ перемещаться будет клон элемента, а сам элемент при этом остается на своей позиции. В опции можно определить функцию. Функция обязательно должна возвращать элемент DOM
iframeFix	Значение по умолчанию — false. Если установить значение true, будет предотвращен перехват события mousemove во время перемещения элемента при прохождении указателя мыши над iframe. Значением может быть селектор jQuery — при этом предотвращение перехвата будет производиться только при прохождении указателя мыши над выбранными iframe. Опция бывает полезна при использовании совместно, например, с cursorAt

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

Опция	Описание
opacity	Устанавливает значение CSS-свойства opacity для элемента, находящегося в процессе перемещения. Значение по умолчанию — false (соответствует полной непрозрачности)
refreshPositions	Значение по умолчанию — false. При значении true позиция "сброса" элемента будет пересчитываться при каждом событии mousemove. Использовать с осторожностью! Такой подход может помочь создать очень динамичное приложение, но, безусловно, снизит производительность
revert	Значение по умолчанию — false. Если установить значение true, то элемент возвратится на свою исходную позицию после окончания перетаскивания. Также можно передать значения в виде строки. Возможные значения — ‘valid’ или ‘invalid’. Эти значения необходимы в случае, если перемещаемый элемент будет "сброшен" в какой-либо целевой элемент. При указании значения ‘valid’ перемещаемый элемент возвратится в предыдущую позицию только в том случае, если был "сброшен" в целевой элемент. При значении ‘invalid’ — не возвратится в предыдущую позицию только в том случае, если он был "сброшен" в целевой элемент
revertDuration	Длительность эффекта возвращения элемента на исходную позицию, в миллисекундах. Значение по умолчанию — 500. Опция игнорируется, если опция revert имеет значение false
scope	Значением этой опции является строка. По умолчанию — ‘default’. Перемещаемые элементы, имеющие в опции scope точно такое же значение, как и значение опции scope для элементов с функциональностью droppable, будут приниматься этими элементами. По сути, дополняет опцию accept плагина Droppable (см. разд. 18.2)
scroll	Значение по умолчанию — true — при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена
scrollSensitivity	Число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. Значение по умолчанию — 20
scrollSpeed	Число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние, определенное в опции scrollSensitivity. Значение по умолчанию — 20
snap	Значение по умолчанию — false. Если установить значение true (что эквивалентно ‘.ui-draggable’, поскольку значение может определяться также селектором jQuery), то перемещаемый элемент будет "прилипать" к краям выбранных элементов при прохождении около них
snapMode	Опция определяет, как именно перемещаемый элемент будет "прилипать" к выбранным элементам. Например, только к внешним или только к внутренним сторонам элементов. Возможные значения — ‘inner’, ‘outer’, ‘both’. Любое значение игнорируется при snap: false. Значение по умолчанию — ‘both’

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

Опция	Описание
snapTolerance	Расстояние в пикселах от перемещаемого элемента до выбранного, при котором произойдет "прилипание". Значение по умолчанию — 20. Любое значение игнорируется при snap: false
stack	Объект, с помощью которого осуществляется автоматический контроль за свойством z-index определенной группы перемещаемых элементов, всегда помещая перемещаемый элемент поверх остальных. Значение свойства ‘group’ определяет селектор jQuery. Дополнительно можно определить свойство ‘min’, число, ниже которого значение z-index опуститься не сможет. Например: $(‘.selector’).draggable({ stack: { group: ‘.selector’, min: 50 } });
zIndex	Число, определяющее значение свойства z-index, перемещаемого элемента. По умолчанию — false

Кроме гибкой настройки плагина Draggable, есть возможность заставить его реагировать на некоторые события. Листинг 18.1.4 иллюстрирует пример одного из возможных событий плагина.

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

[code language=”javascript”]

В примере, приведенном в листинге 18.1.4, мы определили в опции stop callbackфункцию. Функция принимает два аргумента — объекты event и ui. На простом примере показано, как можно обратиться к свойствам этих объектов. В итоге, по окончании перемещения элемента в окне предупреждения мы увидим информацию о типе наступившего события — dragstop — и текущее абсолютное положение элемента на странице.

Любая callback-функция, определенная в опциях start, drag или stop, принимает два аргумента — event и ui. Объект event — это объект события, а ui — специальный объект, в свойствах которого содержится следующая информация:

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

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

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

В табл. 18.2 приведены описания всех возможных событий плагина Draggable и названия опций, в которых могут быть определены callback-функции.

Таблица 18.2. События плагина Draggable

Опция	Событие	Описание
create	dragcreate	Наступает в момент инициализации
start	dragstart	Наступает каждый раз при начале перемещения элемента
drag	drag	Происходит все время, пока элемент находится в процессе перемещения
stop	dragstop	Наступает каждый раз при завершении перемещения элемента

Плагин Draggable имеет четыре метода, с помощью которых можно управлять им уже после инициализации. Познакомимся с одним из методов на примере, приведенном в листинге 18.1.5. Здесь нам пригодятся две кнопки, которые мы до этого момента не замечали.

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

[code language=”javascript”]

В примере из листинга 18.1.5 мы связали с кнопками Get Option и Set Option событие click. При щелчке на кнопке Get Option мы вызовем метод option, имя которого указываем в первом аргументе, а во втором аргументе передаем название опции, значение которой мы хотели бы получить. В итоге мы увидим окно предупреждения, где будет показано значение false, поскольку при инициализации эта опция не была определена, а по умолчанию она имеет именно такое значение. По-

пробуйте перетаскивать элемент с помощью мыши — он будет плавно перемещаться в любых направлениях.

Сделаем щелчок на кнопке Set Option, снова вызывая метод option, но теперь мы передаем три аргумента. Первый — название метода, второй — название опции, значение которой мы хотим изменить, и третий аргумент — новое значение опции. Таким образом, передав опции grid значение [50,50], мы заставим элемент перемещаться дискретно, вдоль сетки с шагом 50 50 пикселов.

Описания всех методов плагина Draggable приведены в табл. 18.3.

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

Метод	Описание
destroy .draggable(‘destroy’)	Полностью удаляет всю функциональность плагина Draggable. Возвращает элементы в состояние, предшествующее инициализа- ции
disable .draggable(‘disable’)	Временно запрещает использование всей функциональности плагина. Вновь разрешить ее можно с помощью метода enable
enable .draggable(‘enable’)	Разрешает использование всей функциональности плагина, если ранее она была запрещена методом disable
option .draggable(‘option’, optionName, [value])	С помощью этого метода можно установить значение любой опции плагина после инициализации
option .draggable(‘option‘, optionName)	С помощью этого метода можно получить значение любой опции плагина после инициализации
widget .draggable(‘widget‘)	С помощью этого метода можно получить доступ к объекту, который представляет собой перемещаемый элемент

Рассмотрим еще один интересный пример, демонстрирующий возможность "сброса" перемещаемых элементов в сортируемый список (листинг 18.1.6).

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

<!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-1-6</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/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">
.draggable {
width:200px; margin:5px; padding-left:10px; border:1px solid #369; background-color:#eee; cursor:move;
}
#sortable li {
width:200px; margin:5px; padding-left:10px; border:1px solid #000; background-color:#333; color:#fff; cursor:move;
}
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable();
$(".draggable").draggable({ connectToSortable: "#sortable", helper: "clone"
});
});
</script>
</head>
<body>
<ul>
<li class="draggable">List 1, item 1</li>
<li class="draggable">List 1, item 2</li>
<li class="draggable">List 1, item 3</li>
</ul>
<br />
<ul id="sortable">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
<li>List 2, item 4</li>
<li>List 2, item 5</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-1-6</title>

.draggable {

width:200px; margin:5px; padding-left:10px; border:1px solid #369; background-color:#eee; cursor:move;

}

#sortable li {

width:200px; margin:5px; padding-left:10px; border:1px solid #000; background-color:#333; color:#fff; cursor:move;

}

</style>

$(function(){

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

$(".draggable").draggable({ connectToSortable: "#sortable", helper: "clone"

});

</script>

</head>

<body>

<ul>

</ul>

<br />

</ul>

</body>

</html>

HTML-разметка, приведенная в листинге 18.1.6, — это два ненумерованных списка. Элементы li первого списка имеют атрибут class со значением draggable, с помощью JavaScript-кода мы сделаем их перемещаемыми. Второй список имеет идентификатор #sortable, и опять же с помощью JavaScript-кода получит возможность сортировки элементов li в пределах списка. Кроме того, появится возможность перемещать и "сбрасывать" элементы li из первого списка во второй.

Посмотрим теперь, как такие возможности реализуются с помощью JavaScript. Сделать второй список сортируемым не составляет труда — выбираем список по

его идентификатору #sortable, указанному в селекторе, и применяем к нему метод

sortable, не определяя никаких опций.

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

Для того чтобы реализовать перемещение и "сброс" элементов первого списка во второй, нужно определить опцию connectToSortable, указав в качестве значения селектор jQuery. В данном случае это #sortable, т. е. идентификатор сортируемого списка. Необходимо отметить, что для корректной работы следует определить еще и опцию helper, указав в ней значение clone.

Это все. Теперь элементы первого списка можно перемещать и "сбрасывать" во второй список.

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

Популярное

Категории

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

Решение

Обсуждение

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

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