Отображение перемещяющихся объектов

На предыдущих уроках Мы видели, что можно создавать перемещающиеся объекты с помощью слоёв. Теперь нашей задачей является регистрация объекта, на который нажал пользователь. Затем этот объект должен следовать за движениями мыши. Есть код для примера, показанного в начале этого урока:

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() { // define the 'dragable' layers dragObj[0]= document.layers["layer0"]; dragObj[1]= document.layers["layer1"]; dragObj[2]= document.layers["layer2"]; }

function whichObj(e) {

// check which object has been hit

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"> <font size=+1>Object 2</font> </layer>

</body> </html>

Вы можете видеть, что мы определяем три слоя в части <body> этой HTML-страницы. После того, как страница полностью загружена, функция init()

вызвается через обработчик события onLoad в теге <body>:

function init() { // define the 'dragable' layers dragObj[0]= document.layers["layer0"]; dragObj[1]= document.layers["layer1"]; dragObj[2]= document.layers["layer2"]; }

Массиву dragObj присваиваются все слои, которые могут перемещаться пользователем. Каждый слой получает номер в массиве dragObj. Позже, это понадобится нам.

Вы можете видеть, что мы используем тот же самый код, который показан выше, чтобы фиксировать события мыши:

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

window.onmousedown= startDrag; window.onmouseup= endDrag; window.onmousemove= moveIt;

Я добавил следующую строку к функции startDrag():

currentObj= whichObj(e);

Функция whichObj() определяет, на какой объекте щелкнул пользователь. Она возвращает номер слоя. Если не был нажат никакой уровень, то будет возвращено значение null. Переменная currentObj

сохраняет это значение. Это означает, что currentObj

представляет номер слоя, который передвигается в настоящее время (или null, если никакой уровень не передвигается).

В функции whichObj() мы проверяем свойства left, top, width и height для каждого слоя. С помощью этих значений мы можем проверить на какой объект нажал пользователь.

Содержание раздела