Всё для Учёбы — студенческий файлообменник
1 монета
pdf

Студенческий документ № 005297 из ИУБиП

Лабораторное занятие № 9

Тема: Drag & Drop

Цель: Изучить приемы создания документов, исользующих Drag & Drop

Задание:

1 Ознакомиться с теоретическим материалом по теме.

2 Создайте документ со следующим сценарием. Пользователь нажал клавишу мыши в каком-либо месте на окне браузера. Наш скрипт должен зафиксировать это событие и вычислить, с каким объектом (то есть слоем) это было связано.

3 Создайте документ, в котором демонстрируется применение MouseMove - текущие координаты курсора мыши отображаются в окне состояния.

4 Объедините оба последних задания. Нужно, чтобы были представлены координаты указателя мыши, когда пользователь перемещает мышь, нажав на клавишу.

5 Создать документ, в котором нужно определить, по какому именно слою пользователь щелкнул клавишей мыши. И затем этот объект должен двигаться вслед за мышью.

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1

С помощью новой модели событий в языке JavaScript, 1.2 и механизма слоев можно реализовать на web-странице схему drag & drop ("перетащил и оставил"). Для этого понадобится, по крайней мере, Netscape Navigator 4.0, поскольку нужно пользоваться особенностями языка JavaScript 1.2.

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

Язык JavaScript не поддерживает напрямую механизм drag & drop. Это значит, что нет возможности назначить объекту image свойство dragable (перемещаемый) или что-либо в этом роде. Поэтому мы должны сами писать необходимый для этого код. Это не так сложно. Для этого нужны две вещи. Во-вервых, нужнозарегистрировать определенные события, связанные с работой мышью, то есть нужно понять, каким образом, можно узнать, какой объект необходимо переместить и на какую позицию? Затем нужно подумать, каким именно образом будет показываться перемещение объектов по экрану. Конечно же, желательно пользоваться слоями при создании объектов и перемещении их по экрану. Каждый объект представлен собственным слоем.

События при работе с мышью в JavaScript 1.2

Какие события, происходящие при работе с мышью, следует использовать? Нет такого события, какMouseDrag, однако того же самого можно достичь, отслеживая события MouseDown, MouseMove и MouseUp. В версии 1.2языка JavaScript используется новая модель событий. И без нее нельзя решить эту задачу. Взглянем на некоторые важные ее части еще раз.

MouseDown, MouseMove и MouseUp

Вязыке JavaScript нетсобытия MouseDrag. Поэтому мы должны пользоваться событиями MouseDown, MouseMove и MouseUp, реализуя механизм drag & drop.

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

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

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

Реализации

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

Методические рекомендации к выполнению задания 2

Создайте документ со следующим сценарием. Пользователь нажал клавишу мыши в каком-либо месте на окне браузера. Наш скрипт должен зафиксировать это событие и вычислить, с каким объектом (то есть слоем) это было связано. Нам необходимо знать координаты точки, где произошло это событие. В JavaScript 1.2 реализован новый объект Event, который сохраняет координаты этой точки (а также еще и другую информацию о событии).

Другой важный момент заключается в перехвате событий. Если пользователь, например, щелкает по клавише мыши, то сигнал о соответствующем событии посылается непосредственно объекту button. Однако в нашем примере необходимо, чтобы событие обрабатывалось объектом window (окно). Поэтому мы позволяем объекту окна перехватывать сигнал о событии, связанном с мышью, т.е. чтобы именно объект window фиксировал это событие и имел возможность на него реагировать. Это демонстрируется в следующем примере (на примере события Click). Вы можете щелкнуть в любом месте окна браузера. При этом возникнет окно сообщения, где будут показаны координаты точки, где это событие имело место. Код:

"Кликните" клавишей мыши где-нибудь в этом окне.

Сперва мы сообщаем, что объект window перехватывает сигнал о событии Click. Для этого мы пользуемся методом captureEvent(). Строка window.onclick= displayCoords; говорит о том, что должно происходить, когда случается событие Click. Конкретнее, здесь сообщается, что в качестве реакции на событие Click браузер должен вызвать процедуру displayCoords() (Заметим, что Вам при этом не следуетставить скобки после слова displayCoords). В свою очередь, displayCoords() - это функция, которая определяется следующим образом:

function displayCoords(e) {

alert("x: " + e.pageX + " y: " + e.pageY); }

Как видите, эта функция имеет аргумент (мы назвали его e). На самом деле это объект Event, который передается на обработку функции displayCoords(). Объект Event имеет свойства pageX и pageY (наряду с другими), из которых моно получить координаты точки, где произошло событие. Окно с сообщением лишь показывает эти значения.

Методические рекомендации к выполнению задания 3

Создайте документ, в котором демонстрируется применение MouseMove - текущие координаты курсора мыши отображаются в окне состояния.

од скрипта почти такой же, как и в предыдущем задании:

Координаты мыши отображаются в строке состояния.

Заметьте, что нуно написать именно Event.MOUSEMOVE, где слово MOUSEMOVE обязательно должно быть написано заглавными буквами. А указывая, какая функция должна быть вызвана, когда произойдет событие MouseMove, Вы должны писать ее строчными буквами: window.onmousemove=...

Методические рекомендации к выполнению задания 4

Объедините оба последних задания. Нужно, чтобы были представлены координаты указателя мыши, когда пользователь перемещает мышь, нажав на клавишу.

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

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

Во-первых, мы заставляем объект 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. И мы можем приступить к рисованию на экране наших объектов.

Методические рекомендации к выполнению задания 5

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

И затем этот объект должен двигаться вслед за мышью. Код задания:

e.pageX) &&

(dragObj[i].top 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

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

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

Вопросы для самоконтроля:

1 Что подразумевает технология drag & drop?

2 Поддерживает ли язык JavaScript напрямую механизм drag & drop?

3 Какие события, происходящие при работе мышью, существуют в JavaScript?

4 Каким образом осуществляется перехватка событий?

5 Охарактеризуйте событие MouseMove.

Показать полностью… https://vk.com/doc62771886_249148549
178 Кб, 11 декабря 2013 в 10:52 - Россия, Ростов-на-Дону, ИУБиП, 2013 г., pdf
Рекомендуемые документы в приложении