Печать

Руководство по использованию технологии "перетащи-и-брось" на jQuery

jQuery UI

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

Самый простой способ подключить библиотеки - воспользоваться Google CDN:

<head>
...
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 
...
</head>

 

Делаем элемент перетаскиваемым

Когда вы добавляете элемент к вашей веб странице (например,  div или изображение), то он фиксируется в определённом положении. Однако с помощью jQuery UI легко сделать его перетаскиваемым с помощью курсора мыши.

Чтобы сделать элемент перемещаемым, просто вызываем метод draggable() для него. Вот так:

<!doctype html>
<html lang="ru">
<head>
 
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable();
}
 
</script>
 
</head>
<body>

 

Добавляем опции перетаскивания

Методу draggable() можно передать много различных опций для настройки поведения элемента при перетаскивании:

$('#makeMeDraggable').draggable( {
    опция1: значение1,
    опция2: значение2,
    ...
  } );

Некоторые часто  используемые опции из большого списка:

containment
По умолчанию вы можете перетаскивать элементы по всей странице. Но можно ограничить область перемещения определенной частью. Для опции containment можно использовать значения:
'parent'
Ограничиваем область перемещения родительским элементом
'document'
Ограничиваем область перемещения всей страницей
'window'
Ограничиваем область перемещения окном браузера
Селектор
Ограничиваем область перемещения выбранным элементом
Массив из 4 значений ([x1,y1,x2,y2])
Ограничиваем область перемещений определенным прямоугольником
cursor
Изменяем курсор при перемещении. Например, можно установить значение 'move', чтобы курсор мыши приобрел вид пересекающихся двухсторонних стрелок при перетаскивании элемента.
snap
Устанавливаем селектор (например, snap: '#snapToMe') элемента, к которому прилипает перетаскиваемый элемент. Также можно установить значение true, чтобы перетаскиваемый элемент прилипал к  любому другому перетаскиваемому элементу страницы.
stack
Если вы создаете группу перетаскиваемых элементов, например, набор карт, то обычно один из них, как правило, последний двигаемый объект, нужно располагать поверх остальных элементов группы. Установив опции stack значение в виде селектора, который соответствует группе элементов, вы можете добиться такого поведения объектов. jQuery UI задаст свойства z-index элементов так, что текущий перетаскиваемый объект будет располагаться сверху.

Для просмотра полного списка доступных опций, смотрите документацию jQuery UI.

Изменим наш пример, чтобы использовать некоторые опции:

function init() {
  $('#makeMeDraggable').draggable( {
    containment: '#content',
    cursor: 'move',
    snap: '#content'
  } );
}

 

Обратите внимание на изменение поведения перетаскиваемого объекта: его перемещение ограничено элементом #content, вид курсора изменяется, и сам перетаскиваемый элемент прилипает к границам ограничивающего элемента.

 

Используем вспомогательный элемент

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

Для использования вспомогательного элемента нужно установить опцию helper. Доступные значения для данной опции:

'original'
Значение по умолчанию. Перемещается сам оригинальный элемент.
'clone'
Создается копия элемента, которая перемещается.
Функция
Данная опция позволяет создавать произвольный вспомогательный элемент. Вы определяете функцию, которая принимает объект event и возвращает разметку вспомогательного элемента. Данный элемент затем перемещается вместо оригинала.

Когда используется значение 'clone' или функция, то вспомогательный элемент разрушается после завершения операции перетаскивания. Однако вы можете использовать событие stop, чтобы получить информацию о вспомогательном элементе (например, его положение) перед уничтожением.

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

<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#draggableHelper { width: 300px; height: 300px; background: yellow; }
</style>
 
...
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    helper: myHelper
  } );
}
 
function myHelper( event ) {
  return '<div id="draggableHelper">Вспомогательный элемент - тащи меня!</div>';
}
 
</script>

 

 

События: реагируем на перемещения

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

$('#makeMeDraggable').draggable( {
    eventName: eventHandler,
    ...
  } );

Список доступных событий:

create
Генерируется при создании перетаскиваемого элемента вызовом функции draggable().
start
Генерируется при начале процесса перетаскивания элемента.
drag
Генерируется при перемещении курсора мыши в процессе перетаскивания элемента.
stop
Генерируется, когда пользователь отпускает кнопку мыши после перетаскивания элемента.

Обработчик события должен принимать 2 аргумента:

  • Объект события (event).
  • Объект jQuery UI, который представляет перетаскиваемый элемент (ui).

Для объекта ui доступны 3 опции для получения информации о перетаскиваемом элементе:

helper
Объект jQuery, который представляет вспомогательный элемент для перетаскивания.
position
Объект, который содержит положение перетаскиваемого элемента относительно оригинальной позиции. Объект имеет два свойства: left (X координата от левой границы элемента), и top (Y координата от верхней границы элемента).
offset
Объект, который содержит положение перетаскиваемого элемента относительно документа. Как и объект position, он имеет два свойства left и top.

Изменим наш пример так, чтобы он показывал информацию о конечном положении перетаскиваемого элемента относительно документа, когда пользователь отпускает кнопку мыши:

<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    stop: handleDragStop
  } );
}
 
function handleDragStop( event, ui ) {
  var offsetXPos = parseInt( ui.offset.left );
  var offsetYPos = parseInt( ui.offset.top );
  alert( "Перетаскивание завершено!\n\nСмещение: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
 
</script>

 

 

Задаем стили для перетаскиваемого элемента

Иногда важно придать перетаскиваемому элементу другой вид. Например, нужно выделять перетаскиваемый элемент, или добавить тень для него, чтобы он выглядел приподнятым над страницей.

При перетаскивании элемента jQuery UI использует для него класс CSS ui-draggable-dragging. Вы можете установить свойства для данного класса, чтобы изменить стиль перетаскиваемого элемента.

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

<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#makeMeDraggable.ui-draggable-dragging { background: green; }
</style>

 

 

Устанавливаем целевой элемент для перетаскивания

Мы только что описали, как сделать элемент перетаскиваемым, и как обрабатывать события перетаскивания.

Но есть другой способ реагировать на перетаскивание элементов. Можно создать целевой элемент, который будет принимать перетаскиваемые элементы.

Когда перетаскиваемый элемент бросается над целевым элементом, последний генерирует событие drop. Написав функцию обработчик события drop, вы можете  определить, какие элементы воспринимаются целевым элементом.

Вы также может использовать события over и out для определения,  когда  перетаскиваемый элемент находится над целевым и когда покидает его. Для более детальной информации смотрите документацию по jQuery UI.

Чтобы сделать элемент целевым, нужно использовать метод droppable().

Изменим код нашего примера, чтобы создать целевой элемент:

<!doctype html>
<html lang="ru">
<head>
 
<style>
#makeMeDraggable { float: left; width: 300px; height: 300px; background: red; }
#makeMeDroppable { float: right; width: 300px; height: 300px; border: 1px solid #999; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable();
  $('#makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}
 
function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'Квадрат с ID "' + draggable.attr('id') + '" был доставлен к месту назначения!' );
}
 
</script>
 
</head>
<body>
 
<div id="content" style="height: 400px;">
 
  <div id="makeMeDraggable"> </div>
  <div id="makeMeDroppable"> </div>
 
</div>
 
</body>
</html>

Мы создали функцию handleDropEvent() для реагирования на событие drop. Так как это событие перетаскивания, функция должна принимать два аргумента: объекты event и ui.

Объект ui имеет свойство draggable, значения которого соответствует перетаскиваемому элементу. Наша функция использует данное свойство вместе с методом jQuery attr()для получения ID перетаскиваемого элемента ("makeMeDraggable").


Интересная статья? Поделись ей с другими: