// Сообщить броузеру, какие данные будут буксироваться.
// Если конструктор Date вызывается как функция, он возвращает
// строку с полной информацией о текущем времени
dt.setData("Text", Date + ”\n”);
// Определить ярлык, который будет служить визуальным представлением перемещаемой
// строки, в броузерах, поддерживающих эту возможность. Без этого для визуального
// представления броузер мог бы использовать изображение текста в часах,
if (dt.setDraglmage) dt.setDragImage(icon, 0, 0);
};
}):
</script>
<style>
flclock { /* Придать часам привлекательный внешний вид */
font: bold 24pt sans;
background: #ddf;
padding: 10px;
border: solid black 2px;
border-radius: 10px;
}
</style>
<h1>Drag timestamps from the clock</h1>
<span id="clock"></span> <!-- Здесь отображается время -->
<textarea cols=60 rows=20></textarea> <!-- Сюда можно сбросить строку -->
Приемники буксируемых данных сложнее в реализации, чем источники. Приемником может быть любой элемент документа: чтобы создать приемник, не требуется устанавливать HTML-атрибуты, как при создании источников, - достаточно просто определить соответствующие обработчики событий. (Однако с реализацией нового прикладного интерфейса буксировки, определяемого стандартом HTML5, вместо некоторых обработчиков событий, описываемых ниже, в элементе-приемнике необходимо будет установить атрибут
dropzone
.) В приемнике возбуждается четыре события. Когда буксируемый объект оказывается над элементом документа, броузер возбуждает в этом элементе событие «dragenter». Определить, содержит ли буксируемый объект данные в формате, понятном приемнику, можно с помощью свойства
dataTransfer.types
. (При этом может также потребоваться проверить свойство
dataTransfer.effectAllowed
, чтобы убедиться, что источник и приемник поддерживают выполняемую операцию: перемещение, копирование или создание ссылки.) В случае успешного прохождения этих проверок элемент-приемник должен дать знать пользователю и броузеру, что он может принять буксируемый объект. Обратную связь с пользователем можно реализовать в виде изменения цвета рамки или фона. Самое интересное: приемник сообщает броузеру, что он готов принять буксируемый объект, отменяя это событие.
Если элемент не отменит событие «dragenter», переданное ему броузером, броузер не будет считать этот элемент приемником для данной операции буксировки и не будет передавать ему дополнительные события. Но если приемник отменит событие «dragenter», броузер будет посылать ему события «dragover», пока пользователь будет буксировать объект над приемником. Интересно (снова) отметить, что приемник должен обрабатывать и отменять все эти события, чтобы сообщить, что он по-прежнему готов принять буксируемый объект. Если приемнику потребуется сообщить, что он поддерживает только операцию перемещение, копирования или создания ссылки, он должен устанавливать свойство
dataTransfer.dropEffect
в обработчике события «dragover».
Если пользователь переместит буксируемый объект за границы приемника, который сообщал о своей готовности принять объект отменой событий, в приемнике будет возбуждено событие «dragleave». Обработчик этого события должен восстановить прежний цвет рамки или фона элемента или отменить любые другие визуальные изменения, выполненные в ответ на событие «dragenter». К сожалению, оба события, «dragenter» и «dragleave», всплывают; и если приемник имеет вложенные элементы, будет сложно отличить, говорит ли событие «dragleave» о том, что указатель мыши с буксируемым объектом вышел за границы элемента-приемника или что он вышел за границы вложенного элемента внутри приемника.
Наконец, если пользователь сбросит буксируемый объект над приемником, в приемнике будет возбуждено событие «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 для них