<font size=+1>Object 2</font>
</layer>
</body>
</html>
Можно видеть, что в разделе <body> нашей HTML-страницы мы определяем три слоя. После того, как была загружена вся страница, при помощи программы обработки события
function init() {
// задать 'перемещаемые' слои
dragObj[0]= document.layers['layer0'];
dragObj[1]= document.layers['layer1'];
dragObj[2]= document.layers['layer2'];
}
Массив
Можно видеть, что мы используем тот же самый код, что использовался ранее для перехвата событий, связанных с мышью:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= startDrag;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
К функции
currentObj= whichObj(e);
Функция
В функции
'Оставляемые' объекты
Теперь мы имеем все, что необходимо, чтобы реализовать механизм drag & drop. С помощью нашего скрипта пользователь может перемещать объекты по web-странице. Однако мы еще ничего не говорили об размещении перемещенных объектов. Предположим, Вы хотите создать онлайновый магазин. У нас есть несколько изделий, которые можно поместить в корзину. Пользователь должен переносить эти изделия в корзинку и оставлять их там. Это означает, что мы должны регистрировать моменты, когда пользователь опускает некий объект в корзину — иными словами, что он хочет купить его.
Какую часть кода мы должны изменить, чтобы сделать такое? Мы должны проверить, в какой месте оказался объект после того, как было зафиксировано событие
Реализации
Есть несколько путей для совершенствования нашего скрипта. Во-первых, мы могли бы изменять порядок следования слоев, как только пользователь щелкает клавишей мыши по какому-либо объекту. Иначе выглядело бы странным, если бы Вы перемещали объект, а он при этом прятался от Вас за окружающие предметы. Очевидно, что эту проблему можно решить, меняя лишь порядок следования слоев в функции
Я далек от мысли, что Вас устроит перемещение красных, зеленых и синих кубиков по Вашей web странице. Добавьте немного красивой графики, и читатели уже запомнят Вашу страницу. Вы можете поместить что-либо в объект слоя. Например, положите туда один тэг <img>, если хотите, чтобы ваш объект предстал в виде графического изображения.
