автордың кітабынан сөз тіркестері  HTML: Популярный самоучитель

Александр Чиртик

Пример 13.18. Перетаскивание элементов

Перемещение элементов страницы

var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент

//Функция начинает перемещение элемента function start(){

if (event)

fMoving = true;

element = event.srcElement;

//Сохраняем координаты "хватания" элемента dX = event.offsetX;

dY = event.offsetY;

//Для перемещения элемент должен свободно позиционироваться element.style.position = "absolute";

}

//Функция перемещения элемента function move(){

if (fMoving){

//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;

element.style.pixelTop = event.y – dY;

}

}

Перемещаемый текст

Перемещаемый заголовок

В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).

Пример 13.17. Отслеживание положения мыши

Слежение за мышью

.category {font-weight: bold}

.value {font-family: "courier new"}

function move(){

//Записываем в элементы страницы текущее значение

//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;

wnd.innerText = event.clientX + "x" + event.clientY;

element.innerText = event.offsetX + "x" + event.offsetY;

prnt.innerText = event.x + "x" + event.y;

//Индикация состояния мыши switch (event.button){

case 0: mouse.innerText = "0|0|0"; break;

case 1: mouse.innerText = "1|0|0"; break;

case 2: mouse.innerText = "0|0|1"; break;

case 3: mouse.innerText = "1|0|1"; break;

case 4: mouse.innerText = "0|1|0"; break;

case 5: mouse.innerText = "1|1|0"; break;

case 6: mouse.innerText = "0|1|1"; break;

case 7: mouse.innerText = "1|1|1"; break;

}

}

Экранные координаты:




Оконные координаты:




Относительно элемента:




Относительно родителя:

Кнопки мыши (л|c|п):

Заголовок

Содержимое страницы…

Примеры использования объекта event
Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.

В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML-документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13.17).

Свойства объекта event
Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13.11.

Объект event
Глобальный объект event является большим подарком для тех, кто хочет создавать сценарии, досконально отслеживающие и адекватно реагирующие практически на все действия пользователя. Поддержка этого объекта очень сильно отличается в различных браузерах. В этом разделе рассмотрено использование объекта event только для браузера Internet Explorer.

Объект screen
Глобальный объект screen предоставляет набор свойств, которые сообщают сценарию некоторую информацию о возможностях видеосистемы компьютера пользователя.

Свойства объекта screen приводятся в табл. 13.10.

Первая функция приведенного в примере 13.16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML-документе).

Второй и третий параметры используются для корректного позиционирования показываемого меню. Перед тем как будет показано новое меню, скрывается то, которое было показано ранее (если оно имеется). Для этого ссылка на отображаемое меню сохраняется в глобальной переменной lastMenu.

Если пользователь открыл меню, но потом передумал выбирать какой-либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.

Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций-обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu(). Этим достигается закрытие меню после выбора одного из его пунктов.

При выборе пунктов из строки меню происходит вызов одной и той же функции сценария. Этой функции в качестве параметров передается ссылка на меню, которое нужно открыть, а также ссылки на строку меню и ссылка на пункт, к которому относится показываемое меню. При рассмотрении сценария станет ясно, зачем это нужно.

Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).

В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13.5).