Стефан Кох - Введение в JavaScript для Мага

Код этого примера выглядит следующим образом:

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

function startDrag(e) {

window.captureEvents(Event.MOUSEMOVE);

}

function moveIt(e) {

// показывать координаты

status= "x: " + e.pageX + " y: " + e.pageY;

}

function endDrag(e) {

window.releaseEvents(Event.MOUSEMOVE);

}

// — >

Нажмите на клавишу мыши и, не отпуская ее, передвиньте саму мышь. Координаты курсора будут отображаться в строке состояния.

Во-первых, мы заставляем объект window перехватывать сигналы о событиях MouseDown and MouseUp :

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

Как видно, мы пользуемся символом | ( или ), чтобы сказать, что объект window должен перехватывать несколько указанных событий. Следующие две строки описывают, что именно должно происходить, когда указанные события имеют место:

window.onmousedown= startDrag;

window.onmouseup= endDrag;

В следующей строке кода определяется, что происходит, когда объект window получает сигнал о событии MouseMove :

window.onmousemove= moveIt;

Однако постойте, мы же не определили Event.MOUSEMOVE в window.captureEvents() ! Это означает, что данное событие не будет перехватываться объектом window. Тогда почему мы указываем объекту window вызывать moveIt() , раз сигнал об этом событии никогда не достигает объекта window? Ответ на этот вопрос можно найти в функции startDrag() , которая вызывается сразу после того, как произойдет событие MouseDown :

function startDrag(e) {

window.captureEvents(Event.MOUSEMOVE);

}

Это означает, что объект window начнет перехватывать событие MouseMove , как только будет нажата клавиша кнопка мыши. И мы должны прекратить перехватывать событие MouseMove , если произойдет событие MouseUp . Это делается в функции endDrag() с помощью метода releaseEvents() :

function endDrag(e) {

window.releaseEvents(Event.MOUSEMOVE);

}

Функция moveIt() записывает координаты мыши в окно состояния.

Теперь у нс есть все элементы скрипта, необходимые для регистрации событий, связанных с реализацией механизма drag & drop. И мы можем приступить к рисованию на экране наших объектов.

Показ движущихся объектов

На предыдущих уроках мы видели, как с помощью слоев можно создать перемещающиеся объекты. Все, что мы должны теперь сделать — это определить, по какому именно слою пользователь щелкнул клавишей мыши. И затем этот объект должен двигаться вслед за мышью. Итак, код примера, показанного в начале этого урока:

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;

}

// — >

Object 0

Object 1

Object 2

Можно видеть, что в разделе

function init() {

// задать 'перемещаемые' слои

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 . По этим значеням мы и можем проверять, по которому из объектов пользователь щелкнул клавишей.

"Оставляемые" объекты

Теперь мы имеем все, что необходимо, чтобы реализовать механизм drag & drop. С помощью нашего скрипта пользователь может перемещать объекты по web-странице. Однако мы еще ничего не говорили об размещении перемещенных объектов. Предположим, Вы хотите создать онлайновый магазин. У нас есть несколько изделий, которые можно поместить в корзину. Пользователь должен переносить эти изделия в корзинку и оставлять их там. Это означает, что мы должны регистрировать моменты, когда пользователь опускает некий объект в корзину — иными словами, что он хочет купить его.

Какую часть кода мы должны изменить, чтобы сделать такое? Мы должны проверить, в какой месте оказался объект после того, как было зафиксировано событие MouseUp — то есть мы должны сделать некоторые добавления к функции endDrag() . Например мы могли бы проверять, попадает ли в этот момент курсор мыши в границы некого прямоугольника. Если это так, то Вы вызываете функцию, регистрирующую все изделия, которые необходимо купить (например, Вы можете поместить их в некий массив). Ну и после этого Вы можете показывать это изделие уже в корзинке.

Реализации

Есть несколько путей для совершенствования нашего скрипта. Во-первых, мы могли бы изменять порядок следования слоев, как только пользователь щелкает клавишей мыши по какому-либо объекту. Иначе выглядело бы странным, если бы Вы перемещали объект, а он при этом прятался от Вас за окружающие предметы. Очевидно, что эту проблему можно решить, меняя лишь порядок следования слоев в функции startDrag() .

Я далек от мысли, что Вас устроит перемещение красных, зеленых и синих кубиков по Вашей web странице. Добавьте немного красивой графики, и читатели уже запомнят Вашу страницу. Вы можете поместить что-либо в объект слоя. Например, положите туда один тэг , если хотите, чтобы ваш объект предстал в виде графического изображения.