Шрифт:
Наконец, если пользователь сбросит буксируемый объект над приемником, в приемнике будет возбуждено событие «drop». Обработчик этого события должен получить перемещаемые данные с помощью
dataTransfer.getData
и выполнить над ними соответствующие операции. Если пользователь сбросит над приемником один или более файлов, свойство dataTransfer.files
будет содержать объект, подобный массиву, с объектами File
. (Работа с этим свойством демонстрируется в примере 18.11.) После реализации нового HTML5 API обработчики события «drop» должны будут выполнить обход элементов массива dataTransfer.items[],
чтобы обработать данные, которые могут быть или не быть файлами. Пример 17.5 демонстрирует, как превратить в приемники элементы
<ul>
и как превратить вложенные в них элементы <li>
в источники. Этот пример является демонстрацией концепции ненавязчивого JavaScript. Он отыскивает элементы списка <ul>,
атрибут class
которых включает класс «dnd», и регистрирует в них обработчики событий буксировки. Обработчики событий превращают список в приемник: любой текст, сброшенный над таким списком, будет преобразован в новый элемент списка и добавлен в конец. Обработчики событий также обслуживают ситуации перемещения элементов внутри списка и делают текст каждого элемента списка доступным для буксировки. Обработчики событий источников поддерживают операции копирования и перемещения и удаляют элементы списка, которые были сброшены в ходе выполнения операции перемещения. (Обратите внимание, что не все броузеры обеспечивают переносимую поддержку операции перемещения.) Пример 17.5. Список как приемник и источник
/* Прикладной программный интерфейс механизма буксировки весьма сложен, его реализации
* в разных броузерах не являются полностью совместимыми. В своей основе этот пример
* реализован правильно, но все броузеры немного отличаются друг от друга,
* и каждый из них имеет свои уникальные особенности. В данном примере не делается
* попыток реализовать обходные решения, характерные для отдельных броузеров.
*/
whenReady(function { // Вызовет эту функцию, когда документ будет загружен
// Отыскать все элементы <ul class='dnd> и вызвать функцию dnd для них
var lists = document.getElementsByTagName("ul");
var regexp = /\bdnd\b/;
for(var і = 0; і < lists.length; i++)
if (regexp.test(lists[i].className)) dnd(lists[i]);
// Добавляет обработчики событий буксировки в элемент списка
function dnd(list) {
var original_class = list.className; // Сохранить начальный CSS-class
var entered =0; // Вход и выход за границы
// Этот обработчик вызывается, когда буксируемый объект оказывается над списком.
// Он проверяет, содержит ли буксируемый объект данные в поддерживаемом формате.
// и, если это так, отменяет событие, чтобы сообщить, что список готов
// принять объект. В этом случае он также подсвечивает элемент-приемник,
// чтобы показать пользователю, что готов к приему данных,
list.ondragenter = function(e) {
е = е И window.event; // Объект события, стандартный или IE
var from = е.relatedTarget;
// События dragenter и dragleave всплывают, из-за чего сложнее определить,
// когда следует подсвечивать элемент, а когда снимать подсветку в случаях,
// подобных этому, где элемент <ui> содержит дочерние элементы <li>.
// В броузерах, поддерживающих свойство relatedTarget, эту проблему можно решить.
// В других броузерах приходится считать пары событий входа/выхода.
// Если указатель мыши оказался над списком, переместившись из-за его пределов,
// или он оказался над списком впервые, необходимо выполнить некоторые операции
entered++;