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

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

  • Перемещение сообщений email в папки.
  • Изменение порядка элементов в списках.
  • Перемещение объектов в играх, таких как карточные игры или головоломки.

Реализация техники перетащи-и-брось на JavaScript обычно достаточно сложно выполнить - в действительности получить работающую кросс браузерную версию было практически невозможно. Но с появлением современных браузеров и новых версий jQuery техника перетащи-и-брось стала доступным инструментом!

В данном уроке мы рассмотрим, как создать интерфейс с техникой перетащи-и-брось на 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").

Нажмите здесь, чтобы посмотреть пример в действии.

Заключение

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/JeL8akbvOoA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Руководство по использованию технологии перетащи-и-брось на jQuery. Часть 1 из 2. | | 2012-06-19 12:04:18 | | Статьи Web-мастеру | | Перетаскивание элементов интерфейса с помощью курсора мыши является, скорее всего, самым интуитивно понятным способом взаимодействия пользователя с вашим сайтом или приложением. Люди часто пытаются | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: