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

Наконец, обратите внимание, что функции moveHandler и upHandler определены внутри функции drag. Благодаря тому, что они определены во вложенной области видимости, эти функции могут пользоваться аргументами и локальными переменными функции drag, что существенно упрощает их реализацию.

Пример 17.2. Буксировка элементов документа

  /**
* Drag.js: буксировка абсолютно позиционированных HTML-элементов.
  *
  * Этот модуль определяет единственную функцию drag, которая должна вызываться
  * из обработчика события onmousedown. Последующие события mousemove будут вызывать
  * перемещение указанного элемента. Событие mouseup будет завершать буксировку.
  * Эта реализация действует в обеих моделях событий, стандартной и IE.
  * Использует функцию getScrollOffsets, представленную выше в книге.
  *
  * Аргументы:
  *
  * elementToDrag: элемент, принявший событие mousedown или содержащий его элемент.
  * Этот элемент должен иметь абсолютное позиционирование. Значения его свойств style.left
  * и style.top будут изменяться при перемещении указателя мыши пользователем.
  *
  * event: объект Event, полученный обработчиком события mousedown.
  **/
  function drag(elementToDrag, event) {
   // Преобразовать начальные координаты указателя мыши в координаты документа
   var scroll = getScrollOffsets: // Вспомогательная функция, объявленная
   // где-то в другом месте
   var startX = event.clientX + scroll.x;
   var startY = event.clientY + scroll.y;

   // Первоначальные координаты (относительно начала документа) элемента, который
   // будет перемещаться. Так как elementToDrag имеет абсолютное позиционирование,
   // предполагается, что его свойство offsetParent ссылается на тело документа,
   var origX = elementToDrag.offsetLeft;
   var origY = elementToDrag.offsetTop;

   // Найти расстояние между точкой события mousedown и верхним левым углом элемента.
// Это расстояние будет учитываться при перемещении указателя мыши,
   var deltaX = startX - origX;
   var deltaY = startY - origY;

   // Зарегистрировать обработчики событий mousemove и mouseup,
   // которые последуют за событием mousedown,
   if (document.addEventListener) { // Стандартная модель событий
   // Зарегистрировать перехватывающие обработчики в документе
   document.addEventListener( "mousemove", moveHandler, true);
   document.addEventListener("mouseup”, upHandler, true);
   }
   else
   if (document.attachEvent) { // Модель событий IE для IE5-8
   // В модели событий IE перехват событий осуществляется вызовом
   // метода setCapture элемента.
   elementToDrag.setCaptuге;
   elementToDrag.attachEvent("onmousemove”, moveHandleг);
   elementToDrag.attachEvent("onmouseup", upHandler);

   // Интерпретировать потерю пер’ехвата событий мыши как событие
   mouseup elementToDrag.attachEvent("onlosecapture", upHandler);
   }

   // Это событие обработано и не должно передаваться другим обработчикам
   if (event.stopPropagation)
   event.stopPropagation; // Стандартная модель
   else
   event.cancelBubble = true; // IE

   // Предотвратить выполнение действий, предусмотренных по умолчанию,
   if (event.preventDefault)
   event.preventDefault; // Стандартная модель
   else
   event.returnValue = false; // IE

   /**
   * Этот обработчик перехватывает события mousemove, возникающие
   * в процессе буксировки элемента. Он отвечает за перемещение элемента.