Техника Web-дизайна для студента
Перетаскивание объектов
В этом разделе будет решаться следующая задача. На странице находится несколько элементов, позиционированных абсолютно. Это, в частности, могут быть рисунки или текстовые блоки. Требуется написать программу, которая позволит после нажатия левой кнопки мыши над элементом перемещать его по странице. После отпускания кнопки объект останется на новом месте. Текст программы приведен в листинге 8.16.
Листинг 8.16. Пример программы, позволяющей перетаскивать объекты в окне браузера
<html>
<head>
<title>nepeTacKHBaHne</title>
<script>
Obj=""
Function cursor_down()
{obj=event. srcElement if (obj!= "")
{x0=obj. style. pixelLeft y0=obj. style. pixelTop cur x=event. clientX
Cur_y=event. clientY del_x=cur_x-xO del_y=cur_y-yO}
}
Function cursor_up()
{obj=""}
Function cursorjaove()
{if (obj!="")
{obj. style. left=event. clientX-del_x obj. style. top=event. clientY-del_y} event. returnValue=false }
</script>
</head>
Cbody onmousedown=cursor_down() onmousemove=cursor_move() on - mouseup=cursor_up()>
|
<img border="0" 189;cursor=move' |
Style="position: '' src="l. jpg"> |
Absolute; |
Left: |
303; |
Top |
|
<img border="0" 55;cursor=move" |
Style="position: src="2.jpg"> |
Absolute; |
Left: |
174; |
Top |
|
<img border="0" 17;cursor=move;' |
Style="position: '' src="3.jpg"> |
Absolute; |
Left: |
406; |
Top |
|
<img border="0" |
Style="position: |
Absolute; |
Left: |
104; |
Top |
|
190;cursor=move" src="4.jpg"> |
<b>
<font size="6">
<span style="position: absolute; left: 105; top:
190;cursor=move">3flecb находится текст, который можно переместить так же, как и любой другой элемент с абсолютным позиционированием.
</span>
</font>
</b>
</body>
</html>
В программе используются три функции: cursor_down(), cur - sо г up () и cursor_move (). Первая из них вызывается на выпол
Нение после нажатия кнопки мыши в любом месте документа (событие onMouseDown в метке <body>), вторая — после отпускания кнопки (событие onMouseUp), третья — при перемещении указателя (событие onMouseMove). В программе используется одна глобальная переменная obj с начальным значением "пустая строка" (""). В первой строке функции cursor_down() переменной obj присваивается значение ссылки на элемент, над которым была нажата кнопка. Для этого используется объект event. До сих пор объекты, с которыми мы имели дело, были вполне конкретными. Это HTML-метки, рисунки, блоки, окна. Объект event носит абстрактный характер и существует для того, чтобы получить дополнительные сведения о каком-либо событии. Каждое событие порождает объект event, а его свойства несут в себе определенную информацию. К свойствам объекта event относятся: srcEiement — ссылка на элемент, относительно которого произошло событие; ciientx — горизонтальная координата указателя мыши в момент события; ciientY — вертикальная координата указателя в момент события.
Всегда ли переменной obj будет присвоено значение ссылки на элемент? Очевидно нет, ведь нажать кнопку мыши можно в таком месте страницы, где нет никаких элементов. Тогда значением переменной obj останется "пустая строка". Поэтому далее в функции cursor down () проверяется значение переменной obj и если оно не является пустой строкой, то выполняется группа операторов в фигурных скобках.
Первые два оператора в фигурных скобках предназначены для определения координат выбранного элемента. Для этого используются два свойства каскадной таблица стилей pixelLeft и pixel - Тор, определяющих горизонтальную и вертикальную координаты левого верхнего угла элемента, которые присваиваются переменным хО И уО.
Следующие два оператора предназначены для определения координат указателя мыши в момент выбора элемента, для чего используются свойства объекта event — ciientx и ciientY. В результате переменным cur_x и cur_y будут присвоены координаты указателя мыши в момент нажатия клавиши.
Далее определяются разницы между соответствующими координатами левого верхнего угла выбранного объекта и указателя мыши dei_x и dei_y, использование которых в дальнейшем позволит нам перемещать элемент именно за ту точку, в которой произошло нажатие клавиши.
В функции cursor_move () осуществляется уже известная проверка того, что выбран конкретный элемент и только в этом случае выполняются два оператора в фигурных скобках. Их назначение — присвоить свойствам left и top, перемещаемого объекта, значения координат указателя мыши с учетом поправок dei_x и de 1_у. Если не вводить поправки, то в момент нажатия кнопки мыши координаты левого верхнего угла перемещаемого элемента станут равными координатам указателя, элемент перескочит на новое место, и дальнейшее его перемещение будет осуществляться за левый верхний угол.
В последней строке функции cursor_move () свойству returnValue объекта event будет присвоено значение false. В этом случае отменяется действие обработчика события, предусмотренное по умолчанию, с тем, чтобы последующее движение указателя мыши вызвало его вновь. Этим будет обеспечен многократный вызов функции cursor move () в процессе движения указателя.
Функция cursor___ up () вызывается на выполнение после отпус
Кания кнопки мыши и содержит единственный оператор, который присваивает переменной obj значение пустой строки. После чего никакие действия, предусмотренные в функции cursor_move (), не будут выполняться, пока не будет выбран новый объект. Указатель изменяет свою форму над элементами, которые можно перемещать, для чего используется свойство cursor каскадной таблицы стилей.
Перемещение элемента может сопровождаться выводом координат перемещаемого элемента. В простейшем случае это могут быть координаты левого верхнего угла элемента. Для этого необходимо поместить в документ две текстовые строки. Например, это можно сделать следующим образом:
Cbody onmousedown=cursor_down() onmousemove=cursor_move() on - mouseup=cursor_up()>
<р align="right">
<Ь> X </ь>
<input type="text" name="Tl" size="6">
<b> Y </b>
<input type="text" name="T2" size="6"x/p>
Функцию Cursor_move () также необходимо дополнить двумя строками:
Function cursor_move()
{if (obj!="")
{obj. style. left=event. clientX-del_x obj. style. top=event. clientY-del_y T1.value=obj. style. pixelLeft T2.value=obj. style. pixelTop} event. returnValue=false}
