Клиентский JavaScript. Справочник
Здесь пользователь может переместить изображение
Здесь пользователь может переместить изображение на странице HTML путём перетаскивания его с помощью мыши. Ваш код HTML определяет изображение и позиционирует его в слое с названием container1. В коде JavaScript обработчики событий устанавливают свойства позиционирования container1 при перетаскивании изображения пользователем, создавая анимацию.
С использованием таблиц стилей/style sheets, изображение первоначально определено и позиционировано так:
<HEAD>
<STYLE type="text/css">
#container1 { position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>В вышеприведённом коде HTML атрибут ID элемента P, который содержит изображение, установлен в container1, делая container1 уникальным идентификатором параграфа и изображения. Тэг STYLE создаёт слой для container1 и позиционирует его.
Следующий код JavaScript определяет обработчики onMouseDown, onMouseUp и onMouseMove:
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Эта функция вызывается только в случае захвата MOUSEMOVE*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT> В этом коде метод captureEvents захватывает события MouseUp и MouseDown. Функции DRAG_begindrag и DRAG_enddrag соответственно вызываются для обработки этих событий.
Если пользователь нажимает левую клавишу мыши, функция DRAG_begindrag стартует, захватывая события MouseMove и сообщая функции DRAG_drag о необходимости их обработки. Затем она присваивает значение свойства pageX события MouseDown свойству DRAG_lastX, значение свойства pageY - свойству DRAG_lastY и true - свойству DRAG_dragging.
Функция DRAG_drag вычисляет DRAG_dragging, чтобы гарантировать, что событие MouseMove было захвачено функцией DRAG_begindrag, затем использует метод moveBy для позиционирования объекта и присваивает значения свойствам DRAG_lastX и DRAG_lastY.
Когда пользователь отпускает левую клавишу мыши, функция DRAG_enddrag останавливает захват событий MouseMove. DRAG_enddrag затем гарантирует, что никакие другие функции не вызываются, устанавливая onmousemove в Null и DRAG_dragging - в false.
