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

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

<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() {
  // 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 присваиваются все слои, которые могут перемещаться пользователем. Каждый слой получает номер в массиве DagObj. Позже, это понадобится нам.

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

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, weight и height для каждого слоя. С помощью этих значений мы можем проверить на какой объект нажал пользователь.

Wiki-учебник по веб-технологиям: JavaScript/ОтображениеПеремещающихсяОбъектов ...

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