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

Пример 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;

   // Сообщить броузеру, какие данные будут буксироваться.
   // Если конструктор 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[], чтобы обработать данные, которые могут быть или не быть файлами.