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

Флэнаган Дэвид
Шрифт:

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;

// Сообщить броузеру, какие данные будут буксироваться.

// Если конструктор 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» о том, что указатель мыши с буксируемым объектом вышел за границы элемента-приемника или что он вышел за границы вложенного элемента внутри приемника.