Шрифт:
// Это событие обработано и не должно передаваться другим обработчикам
if (event.stopPropagation)
event.stopPropagation; // Стандартная модель
else
event.cancelBubble = true; // IE
// Предотвратить выполнение действий, предусмотренных по умолчанию,
if (event.preventDefault)
event.preventDefault; // Стандартная модель
else
event.returnValue = false; // IE
/**
* Этот обработчик перехватывает события mousemove, возникающие
* в процессе буксировки элемента. Он отвечает за перемещение элемента.
**/
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 с добавленной поддержкой буксировки):