JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

• Они должны предоставлять механизм событий для посылки извещений источнику и приемнику в процессе буксировки.

Корпорация Microsoft реализовала прикладной интерфейс механизма буксировки в ранних версиях IE. Он был не очень хорошо продуман и плохо документирован, тем не менее другие производители броузеров попытались скопировать его, а спецификация HTML5 стандартизовала некоторый API, напоминающий прикладной интерфейс в IE, и добавила новые особенности, делающие этот API более простым в использовании. На момент написания этих строк данный новый, более простой в использовании API буксировки еще не был реализован, поэтому в этом разделе будет рассматриваться прикладной интерфейс в IE, как взятый

за основу стандартом HTML5.

Прикладной интерфейс механизма буксировки в IE довольно сложен в использовании, а различия между реализациями в текущих броузерах не позволяют использовать наиболее сложные части API переносимым способом. Тем не менее он дает возможность веб-приложениям участвовать в операциях буксировки подобно обычным приложениям. Броузеры всегда позволяли выполнять простейшие операции буксировки. Если выделить текст в веб-броузере, его легко можно отбуксировать в текстовый процессор. А если выделить URL-адрес в текстовом процессоре, его можно отбуксировать в броузер, чтобы открыть страницу с этим адресом. В этом разделе будет показано, как создавать собственные источники, которые позволят перемещать данные, не являющиеся текстом, и собственные приемники, откликающиеся на попытки оставить в них данные некоторым способом, помимо простого их отображения.

Механизм буксировки всегда опирался на события, поэтому в JavaScript API реализовано два множества событий: события из первого множества возбуждаются в источнике данных, а из второго - в приемнике. Все обработчики событий буксировки получают объект события, подобный объекту события мыши, с дополнительным свойством

dataTransfer

. Это свойство ссылается на объект

DataTransfer

, определяющий методы и свойства прикладного интерфейса механизма буксировки.

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

draggable

. Когда пользователь начинает перемещать указатель мыши с нажатой кнопкой над элементом-источником, броузер не выделяет содержимое элемента, а возбуждает в нем событие «dragstart». Обработчик этого события должен вызвать метод

dataTransfer.setData,

чтобы определить данные (и тип этих данных), доступные в источнике. (Когда будет реализован новый HTML5 API, вместо этого метода нужно будет вызывать метод

dataTransfer.items.add

.) Обработчику также может потребоваться установить свойство

dataTransfer.effectAllowed

, чтобы определить тип операции - «перемещение», «копирование» или «создание ссылки» - поддерживаемой источником, и, возможно, необходимо будет вызвать метод

dataTransfer.setDragImage

или

dataTransfer.addElement

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

В процессе буксировки броузер возбуждает в источнике данных события «drag». Обработчик этого события можно использовать для изменения перемещаемого ярлыка или перемещаемых данных, но в общем случае нет никакой необходимости регистрировать обработчики событий «drag».

Когда выполняется сброс, возбуждается событие «dragend». Если источник поддерживает операцию «перемещения», он должен проверить свойство

dataTransfer.dropEffect

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

перемещенные в другое место, следует удалить из источника.

Событие «dragstart» является единственным, обработку которого необходимо реализовать в простейшем источнике данных. Реализация такого источника представлена в примере 17.4. Он отображает текущее время в формате «hh:mm» в элементе <span> и обновляет время раз в минуту. Если бы это было все, что реализует пример, пользователь мог бы просто выделить отображаемый текст и от; буксировать его. Но этот пример превращает часы в источник данных для механизма буксировки, устанавливая свойство

draggable

элемента часов в значение true и определяя функцию-обработчик

ondragstart

. Обработчик вызывает метод

dataTransfer.setData

, чтобы определить перемещаемые данные - строку с полной информацией о текущем времени (включая дату, секунды и информацию о часовом поясе). Он также вызывает

dataTransfer.setDragIcon,

чтобы определить изображение (ярлык с изображением часов), которое будет перемещаться в процессе буксировки.

Пример 17.4. Источник данных для механизма буксировки

<script src="whenReady.js"></script>

<script>

whenReady(function {

var clock = document.getElementById("clock"); // Элемент часов

var icon = new Image; // Буксируемое изображение

icon.src = "clock-icon.png"; // URL-адрес изображения

// Отображает время раз в минуту

function displayTime {

var now = new Date; // Получить текущее время

var hrs = now.getHours, mins = now.getMinutes;

if (mins < 10) mins = "0" + mins;

clock.innerHTML = hrs + ":" + mins; // Отобразить текущее время

setTimeout(displayTime, 60000); // Запустить через 1 минуту

}

displayTime;

// Сделать часы доступными для буксировки.

// То же самое можно сделать с помощью HTML-атрибута:

// <span draggable="true">... clock.draggable = true;

// Обработчики событий

clock.ondragstart = function(event) {

var event = event || window.event; // Для совместимости c IE

// Свойство dataTransfer является ключом к drag-and-drop API

var dt = event.dataTransfer;