function endDrag(e) {
window.releaseEvents(Event.MOUSEMOVE);
}
// — >
</script>
Нажмите на клавишу мыши и, не отпуская ее, передвиньте саму мышь. Координаты курсора будут отображаться в строке состояния.
</html>
Во-первых, мы заставляем объект window перехватывать сигналы о событиях
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
Как видно, мы пользуемся символом | (
window.onmousedown= startDrag;
window.onmouseup= endDrag;
В следующей строке кода определяется, что происходит, когда объект window получает сигнал о событии
window.onmousemove= moveIt;
Однако постойте, мы же не определили
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
Это означает, что объект window начнет перехватывать событие
function endDrag(e) {
window.releaseEvents(Event.MOUSEMOVE);
}
Функция
Теперь у нс есть все элементы скрипта, необходимые для регистрации событий, связанных с реализацией механизма drag & drop. И мы можем приступить к рисованию на экране наших объектов.
Показ движущихся объектов
На предыдущих уроках мы видели, как с помощью слоев можно создать перемещающиеся объекты. Все, что мы должны теперь сделать — это определить, по какому именно слою пользователь щелкнул клавишей мыши. И затем этот объект должен двигаться вслед за мышью. Итак, код примера, показанного в начале этого урока:
<html>
<head>
<script language='JavaScript'>
<!-
var dragObj= new Array();
var dx, dy;
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
currentObj= whichObj(e);
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
if (currentObj!= null) {
dragObj[currentObj].left= e.pageX — dx;
dragObj[currentObj].top= e.pageY — dy;
}
}
function endDrag(e) {
currentObj= null;
window.releaseEvents(Event.MOUSEMOVE);
}
function init() {
// задать 'перемещаемые' слои
dragObj[0]= document.layers['layer0'];
dragObj[1]= document.layers['layer1'];
dragObj[2]= document.layers['layer2'];
}
function whichObj(e) {
// определить, по какому объекту был произведен щелчок
var hit= null;
for (var i= 0; i < dragObj.length; i++) {
if ((dragObj[i].left < e.pageX) &&
(dragObj[i].left + dragObj[i].clip.width > e.pageX) &&
(dragObj[i].top < e.pageY) &&
(dragObj[i].top + dragObj[i].clip.height > e.pageY)) {
hit= i;
dx= e.pageX- dragObj[i].left;
dy= e.pageY- dragObj[i].top;
break;
}
}
return hit;
}
// — >
</script>
</head>
<body onLoad='init()'>
<layer name='layer0' left=100 top=200 clip='100,100' bgcolor='#0000ff'>
<font size=+1>Object 0</font>
</layer>
<layer name='layer1' left=300 top=200 clip='100,100' bgcolor='#00ff00'>
<font size=+1>Object 1</font>
</layer>
<layer name='layer2' left=500 top=200 clip='100,100' bgcolor='#ff0000'>
