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

Пример 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++;
   if ((from && !ischild(from, list)) || entered == 1) {
   // Вся информация о буксируемом объекте находится в объекте dataTransfer
   var dt = е.dataTransfer;

   // Объект dt.types содержит список типов, или форматов, в которых доступны
   // буксируемые данные. Спецификация HTML5 требует, чтобы свойство types имело
   // метод contains. В некоторых броузерах это свойство является массивом
   // с методом indexOf. В IE версии 8 и ниже оно просто отсутствует,
   var types = dt.types; // В каких форматах доступны данные

   // Если информация о типах отсутствует или данные доступны в простом
   // текстовом формате, подсветить список, чтобы показать пользователю, что он
   // готов принять данные, и вернуть false, чтобы известить о том же и броузер,
   if (!types || //IE
   (types.contains && types.contains("text/plain")) || //HTML5
   (types.indexOf && types.indexOf("text/plain")!=-1)) //Webkit
   {
   list.className = original_class + " droppable";
   return false;
   }

   // Если тип данных не поддерживается, мы не сможем принять их return;
   // без отмены
   }
   return false; // Если это не первое вхождение, мы по-прежнему готовы
   };

   // Этот обработчик вызывается в ходе буксировки объекта над списком.