Перемещение графических объектов

Перемещать мышью изображения можно различными способами. Изучим один из них: пользователь пытается перетащить мышью изображение; затем он должен отпустить кнопку мыши и переместить указатель в нужное место; остановившись в нужном месте, пользователь отпускает кнопку мыши или щелкает ею, чтобы прекратить перемещение изображения. Код перемещения изображения мышью:

<НТМL>

<НЕАD><TITLE>Перемещаемое изображение</TITLE></НЕАD>

</BODY>

flag = false // нельзя перемещать

var id_img = ""

function drag() {

flag = mag

id_img = event.srcElement.id

}

function mybody.onmousemove(){

if (flag){ // если можно перемещать

document.all[id_img].style.top = event.clientY

document.all[id_img].style.left = event.clientX } }

function mybody.onmouseup(){

flag = false // нельзя перемещать

}

</SCRIPT>

</HTML>

Здесь функция drag(), обрабатывающая событие ondragstart (попытка перетаскивания), устанавливает переменную-триггер flag и выясняет, кто инициатор события. Значение переменной flag позволяет определить, можно или нельзя перемещать элемент. В данном примере инициатором события может быть только один элемент. События onmousemove (перемещение указателя мыши) и onmouseup (кнопка мыши отпущена) получает не изображение, а объект тела документа mybody.

Перемещение текстовых областей

Рассмотрим пример HTML-документа, в котором можно перемещать текстовые области, созданные с помощью тегов <TEXTAREA>. Размеры области и шрифта текста определяются в ней в зависимости от значения вертикальной координаты.

<HTML>

<НЕАD><ТITLE>Перемещаемые текстовые облас-ти</ТITLE></НЕАD>

<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute;

top:10; left: 10; fon-size: large"> Это – первый текст</TEXTAREA>

<TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute;

top:100; left:150"> Это – второй текст </TEXTAREA>

<TEXTAREA ID="t3" ondblclick=""drag()" STYLE = "position:absolute; top:150; left:250"> Это - третий текст </ТЕXTAREA>

</BODY>

resizetext() { // установка размеров текстовых областей

var flag = false }

var id_img = ""

function drag() {

flag = !flag

id_img = event.srcElement.id //id элемента, который надо перемещать

function mybody.onmousemove() {

if (flag){

document.all[id_img].style.top = event.clientY

document.all[id_img].style.left = event.clientX

resizetext() }} // установка размеров текстовых областей

function mybody.onmouseup() {

flag = false }

function resizetext () { // установка размеров областей

var у, size, idimg, idtext

for (i =0 ; i < document.all.length; i++) {

if (document.all[i].tagName=='TEXTAREA') {

idtext = document.all[i].id

у = parseInt(document.all[idtext].style.top)

size = Math.min(y, 800)

size = Math.max(size, 60)

document.all[idtext].style.width = size

document.all[idtext].style.height = 0.8*size

document.all[idtext].style.zIndex = у

document.all[idtext].style.fontSize = Math.max(2, y/10)

</SCRIPT>

</HTML>

Схема сценария, осуществляющего непрерывное перемещение видимого элемента документа, имеет следующий вид:

Function init_move() { // инициализация движения

... // подготовка к запуску функции move()

setInterval("move()", задержка)

function move(){

.../* изменение координат top и left стиля перемещаемого элемента */

// вызов функции для перемещения элемента

Cоздаются две функции: init_move(),которая осуществляет подготовку исходных данных и вызывает метод setInterval() с указанием в качестве первого параметра имени второй функции move() в кавычках, и move(), которая изменяет координаты элемента. Поскольку метод setInterval() вызывает функцию move() периодически через заданное количество миллисекунд, то координаты элемента изменяются постоянно. При этом создается эффект движения. Скорость и плавность движения зависят от величин приращения координат (в функции move()) и временной задержки (второго параметра метода setInterval()). Чтобы начать перемещение элемента надо вызвать первую функцию init_move().

Остановка движения

Сценарий с запуском и остановкой движения может выглядеть, например, следующим образом:

function init_move(xid, dx, dy) {

var prmstr = "'"+xid+" ,"+dx+" ,"+dy // строка параметров для move()

prmstr = "move(" +prmstr+ ")"

idjnove = setInterval (prmstr , 200) /* сохраняем идентификатор движения */

}

function move(xid, dx , dy) {

у = parseInt(document.all[xid].style.top)

x = parseInt(document.all[xid].style.left)

document.all.myimg.style.top = у+dy

document.all.myimg.style.left = x+dx