Введение в JavaScript для Мага [Стефан Кох] (fb2) читать постранично, страница - 26
[Настройки текста] [Cбросить фильтры]
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 странице. Добавьте немного красивой графики, и читатели уже запомнят Вашу страницу. Вы можете поместить что-либо в объект слоя. Например, положите туда один тэг <img>, если хотите, чтобы ваш объект предстал в виде графического изображения.
Последние комментарии
3 часов 43 минут назад
3 часов 51 минут назад
4 часов 19 минут назад
4 часов 23 минут назад
4 часов 24 минут назад
4 часов 31 минут назад