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

<b>  }</b>

<b>  else</b>

<b>    if (document.attachEvent) { // Модель событий IE для IE5-8</b>

<b>      // В модели событий IE перехват событий осуществляется вызовом</b>

<b>      // метода setCapture() элемента. </b>

<b>      elementToDrag.setCaptuге();</b>

<b>      elementToDrag.attachEvent(&quot;onmousemove”, moveHandleг);</b>

<b>      elementToDrag.attachEvent(&quot;onmouseup&quot;, upHandler);</b>

<b>      // Интерпретировать потерю пер’ехвата событий мыши как событие</b>

<b>      mouseup elementToDrag.attachEvent(&quot;onlosecapture&quot;, upHandler);</b>

<b>    }</b>

<b>  // Это событие обработано и не должно передаваться другим обработчикам</b>

<b>  if (event.stopPropagation)</b>

<b>    event.stopPropagation(); // Стандартная модель</b>

<b>  else</b>

<b>    event.cancelBubble = true; // IE</b>

<b>  // Предотвратить выполнение действий, предусмотренных по умолчанию,</b>

<b>  if (event.preventDefault)</b>

<b>    event.preventDefault(); // Стандартная модель</b>

<b>  else</b>

<b>    event.returnValue = false; // IE</b>

<b>  /**</b>

<b>  * Этот обработчик перехватывает события mousemove, возникающие</b>

<b>  * в процессе буксировки элемента. Он отвечает за перемещение элемента.</b>

<b>  **/</b>

<b>  function moveHandler(e) {</b>

<b>    if (!е) е = window.event; // Модель событий IE</b>

<b>    // Переместить элемент в позицию указателя мыши с учетом позиций</b>

<b>    // полос прокрутки и смещений относительно начального щелчка,</b>

<b>    var scroll = getScrollOffsets();</b>

<b>    elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + &quot;px&quot;;</b>

<b>    elementToDrag.style.top = (e.clientY + scroll.у - deltaY) + &quot;px&quot;;</b>

<b>    // И прервать дальнейшее распространение события.</b>

<b>    if (е.stopPropagation)</b>

<b>      е.stopPropagation(); // Стандартная модель</b>

<b>    else</b>

<b>      е.cancelBubble = true; // IE</b>

<b>  }</b>

<b>  /**</b>

<b>  * Этот обработчик перехватывает заключительное событие mouseup,</b>

<b>  * которое завершает операцию буксировки.</b>

<b>  **/</b>

<b>  function upHandler(e) {</b>

<b>    if (!е) е = window.event; // Модель событий IE</b>

<b>    // Удалить перехватывающие обработчики событий,</b>

<b>    if (document.removeEventListener) { // Модель событий DOM</b>

<b>      document.removeEventListenerC'mouseup&quot;, upHandler, true);</b>

<b>      document.removeEventListener(&quot;mousemove&quot;, moveHandler, true);</b>

<b>    }</b>

<b>    else</b>

<b>      if (document.detachEvent) { // Модель событий IE 5+</b>

<b>        elementToDrag.detachEvent(&quot;onlosecapture&quot;, upHandler);</b>

<b>        elementToDrag.detachEvent(&quot;onmouseup&quot;, upHandler);</b>

<b>        elementToDrag.detachEvent(&quot;onmousemove&quot;, moveHandler);</b>

<b>        elementToDrag.releaseCapture();</b>

<b>      }</b>

<b>    // И прервать дальнейшее распространение события.</b>

<b>    if (е.stopPropagation)</b>

<b>      е.stopPropagation(); // Стандартная модель</b>

<b>    else</b>

<b>      е.cancelBubble = true; // IE</b>

<b>  }</b>

<b>}</b>

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

<b>&lt;script src=&quot;getScrollOffsets. js&quot;x/script&gt; &lt;!-- требуется функция drag()--&gt;</b>

<b>&lt;script src= &quot;Drag. js&quot;x/script&gt;            &lt;!-- определение drag() --&gt;</b>

<b>&lt;!-- Буксируемый элемент --&gt;</b>

<b>&lt;div style=&quot;positionabsolute; left:100px; top:100px; width:250px;</b>