Введение в JavaScript для Мага | страница 50

Можно видеть, что в разделе нашей HTML-страницы мы определяем три слоя. После того, как была загружена вся страница, при помощи программы обработки события onLoad, указанной в тэге , вызывается функция init():

function init() {

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

dragObj[0]= document.layers["layer0"];

dragObj[1]= document.layers["layer1"];

dragObj[2]= document.layers["layer2"];

}

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

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

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

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

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

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