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

   **/
   function moveHandler(e) {
   if (!е) е = window.event; // Модель событий IE

   // Переместить элемент в позицию указателя мыши с учетом позиций
   // полос прокрутки и смещений относительно начального щелчка,
   var scroll = getScrollOffsets;
   elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";
   elementToDrag.style.top = (e.clientY + scroll.у - deltaY) + "px";

// И прервать дальнейшее распространение события.
   if (е.stopPropagation)
   е.stopPropagation; // Стандартная модель
   else
   е.cancelBubble = true; // IE
   }

   /**
   * Этот обработчик перехватывает заключительное событие mouseup,
   * которое завершает операцию буксировки.
   **/
   function upHandler(e) {
   if (!е) е = window.event; // Модель событий IE

   // Удалить перехватывающие обработчики событий,
   if (document.removeEventListener) { // Модель событий DOM
   document.removeEventListenerC'mouseup", upHandler, true);
   document.removeEventListener("mousemove", moveHandler, true);
   }
   else
   if (document.detachEvent) { // Модель событий IE 5+
   elementToDrag.detachEvent("onlosecapture", upHandler);
   elementToDrag.detachEvent("onmouseup", upHandler);
   elementToDrag.detachEvent("onmousemove", moveHandler);
   elementToDrag.releaseCapture;
   }

   // И прервать дальнейшее распространение события.
   if (е.stopPropagation)
   е.stopPropagation; // Стандартная модель
   else
   е.cancelBubble = true; // IE
   }
  }

Следующий фрагмент демонстрирует порядок использования функции drag в HTML-файле (это упрощенная версия примера 16.2 с добавленной поддержкой буксировки):

  <script src="getScrollOffsets. js"x/script> <!-- требуется функция drag-->
  <script src= "Drag. js"x/script> <!-- определение drag -->
  <!-- Буксируемый элемент -->
  <div style="positionabsolute; left:100px; top:100px; width:250px;
   background-color: white; border: solid black;">
<!-- "Заголовок" окна. Обратите внимание на атрибут onmousedown.– ->
   <div style= "background-color: gray: border-bottom: dotted black;
   padding: 3px; font-family: sans-serif; font-weight: bold;"
   onmousedown="drag(this.parentNode, event);">
   Перетащи меня <!-- Содержимое заголовка -->
   </div>
   <!-- Содержимое буксируемого элемента -->
   <р>Это тест. Проверка, проверка, проверка. </р>
   <р>Тест</р>
   <р>Тест</р>
  </div>

Самым важным здесь является атрибут onmousedown во вложенном элементе <div>. Обратите внимание, что в нем используется свойство this.parentNode. Это говорит о том, что перемещаться будет весь контейнерный элемент.

17.6. События колесика мыши

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

Существует множество проблем совместимости, связанных с событиями «mousewheel», тем не менее вполне возможно написать программный код, действующий на всех платформах. На момент написания этих строк все броузеры, кроме Firefox, поддерживали событие с именем «mousewheel». В Firefox это событие называется «DOMMouseScroll». А в проекте спецификации «DOM Level 3 Events» предложено имя «wheel» вместо «mousewheel». Вдобавок к разным именам события различаются и имена свойств объектов, передаваемых с этими различными событиями, которые определяют величину поворота колесика. Наконец, следует отметить, что существуют также важные отличия в аппаратной реализации колесиков в разных мышах. Некоторые колесики могут вращаться только в одной плоскости, назад и вперед, а некоторые (особенно в мышах компании Apple) могут вращаться также влево и вправо (в действительности такие «колесики» являются трекболами (trackball)). Стандарт «DOM Level 3» даже включает поддержку «колесиков», которые могут вращаться в трех плоскостях - по или против часовой стрелки вдобавок к вращению вперед/назад и влево/вправо.

Объект события, передаваемый обработчику события «mousewheel», имеет свойство wheelDelta, определяющее величину прокрутки колесика. Один «щелчок» колесика в направлении от пользователя обычно соответствует значению 120, а один щелчок в направлении к пользователю - значению -120. В Safari и Chrome для поддержки мышей компании Apple, имеющих трекбол вместо колесика, вращающегося в одной плоскости, вдобавок к свойству wheelDelta объект события имеет свойства wheelDeltaX и wheelDeltaY, при этом значения свойств wheelDelta и wheelDeltaY всегда совпадают.