Одна из самых важных составляющих нового API — набор из семи специальных событий, предназначенных для обработки различных ситуаций перетаскивания. Часть событий срабатывает на источнике (перетаскиваемом элементе), часть — на цели (элементе, на который перетаскивается элемент-источник). Когда пользователь выполняет операцию перетаскивания, на источнике срабатывают следующие три события:
— dragstart. Срабатывает в момент, когда операция перетаскивания начинается. Система настраивает данные, связанные с элементом-источником, именно в этот момент;
— drag. Похоже на событие mousemove, но срабатывает во время операции перетаскивания на элементе-источнике;
— dragend. Срабатывает, когда операция перетаскивания заканчивается (успешно или неудачно).
Следующие события срабатывают на целевом элементе на протяжении той же операции:
— dragenter. Срабатывает, когда во время операции перетаскивания указатель мыши оказывается в области предполагаемого целевого элемента;
— dragover. Похоже на событие mousemove, но срабатывает во время операции перетаскивания на возможных целевых элементах;
— drop. Срабатывает, когда во время операции перетаскивания пользователь отпускает элемент-источник над целевым элементом;
— dragleave. Срабатывает, когда указатель мыши покидает область возможного целевого элемента во время операции перетаскивания. Используется совместно с событием dragenter и обеспечивает взаимодействие с объектами приложения, помогая идентифицировать целевые элементы.
Прежде чем вы начнете внедрять перетаскивание в своих приложениях, следует продумать важный момент. Во время операции перетаскивания браузеры выполняют действия по умолчанию. Для того чтобы получать желаемые результаты, часто приходится запрещать поведение по умолчанию и настраивать действия нужным образом. Для некоторых событий, таких как dragenter, dragover и drop, запрещать поведение по умолчанию необходимо всегда, даже если вы настраиваете для соответствующих действий какую-то специальную обработку. Давайте рассмотрим простой пример, для того чтобы на практике разобраться, как это происходит.
Листинг 8.1. Шаблон для операции перетаскивания
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Перетаскивание</title>
<link rel="stylesheet" href="dragdrop. css">
<script src="dragdrop. js"></script>
</head>
<body>
<section id="dropbox">
Перетащите изображение сюда </section>
<section id="picturesbox">
<img id="image" src="http://www.minkbooks.com/content/monster1.gif"> </section>
</body>
</html>
В HTML-документе из листинга 8.1 присутствует элемент <section> с идентификатором dropbox. Он будет использоваться в качестве цели, а изображение послужит источником. Также в коде можно увидеть ссылки на два файла: со стилями CSS и с кодом JavaScript, в котором происходит обработка операции.
Листинг 8.2. Стили для нашего шаблона (файл dragdrop. css)
#dropbox{ float: left; width: 500px; height: 300px; margin: 10px;
Border: 1px solid #999999;
}
#picturesbox{ float: left; width: 320px; margin: 10px;
Border: 1px solid #999999;
}
#picturesbox > img{ float: left; padding: 5px;
}
Правила в листинге 8.2 всего лишь описывают стили блоков, помогающих идентифицировать поле-источник и целевое поле операции перетаскивания.
Function initiate(){
Source1=document. getElementById(‘image’); source1.addEventListener(‘dragstart’, dragged, false);
Drop=document. getElementById(‘dropbox’); drop. addEventListener(‘dragenter’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘dragover’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘drop’, dropped, false);
}
Function dragged(e){
Var code='<img src="’+source1.getAttribute(‘src’)+’">’; e. dataTransfer. setData(‘Text’, code);
}
Function dropped(e){ e. preventDefault(); drop. innerHTML=e. dataTransfer. getData(‘Text’);
}
Window. addEventListener(‘load’, initiate, false);
Для настройки процедуры перетаскивания можно применить пару атрибутов элементов HTML, но основное действие происходит все же в коде JavaScript. В листинге 8.3 представлены три функции: initiate() добавляет прослушиватели событий для операции перетаскивания, а dragged() и dropped() генерируют и получают информацию, которая передается между объектами в процессе обработки действия.
Для того чтобы обработать обычную операцию перетаскивания, нужно подготовить информацию, которую будут передавать друг другу элемент-источник и целевой элемент. Для этого мы добавили прослушиватель события dragstart. Он при срабатывании события вызывает функцию dragged(), а подготавливает необходимую информацию входящий в функцию метод setData().
На большинстве элементов документа прием перетаскиваемых объектов по умолчанию не поддерживается и никак не обрабатывается. Таким образом, для того чтобы наша «зона приема» могла принимать элемент, необходимо запретить поведение по умолчанию. Мы сделали это, добавив прослушиватели событий dragenter и dragover, а также анонимную функцию, которая выполняет метод preventDefault().
Наконец, мы создали прослушиватель события drop, который вызывает функцию dropped(), — эта функция принимает и обрабатывает данные, отправленные источником.
Для событий dragenter и dragover мы использовали анонимную функцию, содержащую отменяющий эти события метод preventDefault(). Для того чтобы можно было сослаться на событие внутри функции, ей передается переменная e. Если вы хотите побольше узнать об анонимных функциях, зайдите на наш веб-сайт и изучите ссылки для этой главы.
Когда пользователь начинает перетаскивать рисунок, срабатывает событие dragstart и вызывается функция dragged(). В этой функции мы извлекаем значение атрибута src перетаскиваемого элемента и настраиваем передаваемые в элементе данные с помощью метода setData() объекта dataTransfer. На другой стороне процесса, когда пользователь отпускает элемент над зоной приема, срабатывает событие drop и вызывается функция dropped(). Эта функция всего лишь модифицирует содержимое зоны приема, добавляя в нее информацию, полученную с помощью метода getData(). При срабатывании этого события браузеры также выполняют определенные действия по умолчанию (например, открывают ссылку или обновляют содержимое окна, для того чтобы показать, что изображение перенесено в другое место), поэтому мы запрещаем поведение по умолчанию методом preventDefault() — так же, как сделали это для других событий чуть раньше.
Создайте HTML-файл с шаблоном из листинга 8.1, CSS-файл с именем dragdrop. css, содержащий стили из листинга 8.2, и JavaScript-файл с именем dragdrop. js, содержащий код из листинга 8.3. Для тестирования примера откройте файл HTML в своем браузере.
Добавить комментарий