JavaScript Движение и перетаскивание

Цель работы: изучить методы создания сценариев для автоматического движения объектов по заданной траектории и для перетаскивания объектов мышкой.

Движение

Для управления движением объекта используются:

метод имя процесса= setInterval(выражение,период) объекта window, запускающий процесс циклического выполнения выражения (функции);
метод clearInterval(имя процесса) объекта window, останавливающий процесс.

Методом setInterval(выражение, период) запускается процесс, состоящий в циклическом выполнении заданного в первом параметре выражения с периодом, заданным во втором параметре. Процесс останавливается методом clearInterval(имя процесса). В качестве выражения обычно используется функция. Скрипт, задающий движение фотографии по диагонали экрана, приведён в примере 5.1.

Пример 5.1

<HTML> 
<HEAD><TITLE>Движение фотографии</TITLE> 
</HEAD> 
<BODY > 
<BUTTON ID="B1" onclick=Start_stop() 
STYLE="position:absolute; left:300;top:5"> 
Запустить</button> 
<IMG ID="lv" src="LV.jpg" 
STYLE="position:absolute;top:0;left:20"> 
</BODY> 
<SCRIPT> 
dx=8; 
dy=3 
st=false //остановить процесс 
function Start_stop() 
{ if(st) 
  { window.clearInterval(proc) //остановиться 
    st=false //заменить надпись на кнопке с именем В1 
    document.all.B1.innerHTML="Запустить" 
  } 
  else //двигаться (запустить процесс с именем proc) 
  { proc=window.setInterval("move()",100)
st=true 
//заменить надпись на кнопке с именем В1 
document.all.B1.innerHTML="Стоп"  } 
} 
function move() 
{ //ордината верхнего края фотографии (переведено
//в тип INTEGER) 
var y=parseInt(document.all.lv.style.top) 
//абсцисса левого края фотографии 
var x=parseInt(document.all.lv.style.left) 
document.all.lv.style.top=y+dy //Перемещение по OY 
document.all.lv.style.left=x+dx //Перемещение по OX
} 
</script> 
</HTML>

В исходном состоянии фотография находится в верхнем левом углу экрана. Для запуска и остановки движения служит кнопка. Надпись на кнопке меняется. Если фотография неподвижна,то на кнопке написано Запустить, при движении –Стоп.

В браузере Internet Explorer надпись на кнопке можно изменить с помощью свойства innerText:

document.all.B1.innerText="Запустить" 
document.all.B1.innerText= "Стоп"

Браузер Mozilla Firefox не поддерживает свойство innerText, поэтому в примере использовано свойство innerHTML, поддерживаемое обоими браузерами. При нажатии кнопки выполняется функция Start_stop, служащая для запуска или остановки процесса proc. Если proc запущен, то через каждые 100 мсек вызывается функция move, перемещающая фотографию на 8 пикселей вправо и на 3 вниз.

Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать параметрическими уравнениями:

y=R*sin(t) , 
где: R– радиус круга, 0 <= t <= 2

Квадратом может служить контейнер <DIV> …</div> с цветным фоном.

Перетаскивание

В сценариях для перетаскивания какого-либо предмета по окну браузера используется событие onmousemove. Рассмотрим два варианта сценария, в которых используется событие onmousemove. В обоих сценариях пользователь может мышкой передвигать фотографию по всему окну браузера. Первый вариант сценария (пример 5.2) применим только в браузере Internet Explorer. Второй вариант (пример 5.3) правильно выполняется в браузерах Internet Explorer 6.0 и MozillaFirefox 2.0, но он сложнее для понимания.

Пример 5.2.

<HTML> 
<HEAD><TITLE>ПЕРЕМЕЩЕНИЕ ИЗОБРАЖЕНИЯ МЫШКОЙ 
</TITLE> </HEAD> 
<BODY id="body1" STYLE="font-size:12pt"> 
< H2 align= "center"style= "color:#ff00ff"> 
Перетаскивание фотографии мышкой</h2> 
<P align= "center"> 
Фотография начинает двигаться при попадании на неё курсора мышки<BR> При захвате и перемещении фотографии не нажимайте кнопки мышки.<BR> Для прекращения движения щёлкните левой кнопкой мышки</p> 
<P align= right> Примечание. Страница правильно отображается тольков браузере <i>InternetExplorer 6.0</i></p> <img id= "IM1" src= "LV.jpg"" STYLE= "position:absolute;top:200;left:10"> 
</BODY> 
<SCRIPT> flag= false //запрет на перемещения 
// Функция запускается припересечении 
// курсором мышки границы изображения 
function IM1.onmouseover() 
{flag= true } 
// Перетаскивание разрешено // 
function IM1.onmousemove() 
{ if (flag) 
 { //пересчёткоординатизображения
document.all.IM1.style.top= event.clientY-170 
document.all.IM1.style.left=event.clientX-120 } 
}//запрет на перемещения. Запускается при отпускании кнопки мышки 
function IM1.onclick() 
{flag=false } 
</SCRIPT> 
<SCRIPT language="JavaScript" src="ProvBrows.js"> 
</script> 
</HTML>

В примере 5.2 попадание курсора мышки на фотографию служит сигналом к началу перемещения. При дальнейшем перемещении курсора мышки фотография передвигается вместе с ним.Пользователь при перемещении фотографии не должен нажимать на кнопки мышки,так как нажатие на левую кнопку остановит движение и курсор можно будет убрать с фотографии. Нажатие правой кнопки кроме прекращения движения вызывает всплытие меню.

В сценарии используются три функции:

IM1.onmouseover() для запуска процесса перетаскивания;
IM1.onmousemove для перетаскивания;
IM1.onclick() для прекращения перетаскивания.

Все три функции имеют специальные имена. IM1.onmouseоver() означает, что эта функция выполняется, когда на объекте с ID=IM1 происходит событие onmouseоver(). Для функций со специальным именами не нужны операторы вызова.

Функция IM1.onmousemove() выполняется циклически в течение всего времени нахождения курсора мышки в площади фотографии. Так как частота выполнения функции не бесконечная, то при резком движении мышкой можно сорвать курсор с фотографии и прекратить перетаскивание, но такое завершение процесса неудобно. Для управления процессом перетаскивания предназначена логическая переменная flag. Если щёлкнуть кнопкой мышки по фотографии, то выполнится функция IM1.onclick(), переменная flag примет значение false и функция IM1.onmousemove() прекратит менять координаты фотографии. Можно будет убрать курсор с фотографии. Если снова хотя бы коснуться курсором фотографии, то выполнится функция IM1.onmouseover(), переменная flag примет значении true и перетаскивание возобновится.

Во втором варианте сценария (пример5.3) неиспользуются функции со специальными именами.

Пример 5.3

<html> 
<head><title>Перетаскивание</title></head> 
<body onload= "init()"> 
<h2 align= "center" style="color:#ff00ff"> 
Перетаскиваниеквадрата мышкой</h2> <h3>align="center"> 
Установите курсор внутри красногоквадрата, нажмите левую кнопку 
мышки и тащите квадрат.<BR> Для освобождения квадрата 
от захвата отпустите кнопку мышки</h3> 
<P align= right> Примечание. Страница правильно 
отображается в браузерах <i>Mozilla Firefox 2.0</i> 
и <i>Internet Explorer 6.0 </i> </p> 
<DIV id= 'kv' style= 
"position:absolute;left:10;top:10;width:50;height:50;background-color:red"> 
</div> 
</body> 
<SCRIPT> 
flag= false; //Связывание событий с функциями 
function init() 
{   //Если мышка двигается то выполняется ф-ция dragIt
document.all.kv.onmousemove= dragIt 
//Если кнопка мышки отпускается, то - ф-ция osvobodi 
document.all.kv.onmouseup= osvobodi 
document.all.kv.onmousedown=zachvat
} 
function dragIt(evt) 
{   Параметр evt создаётся самим браузером
sobytie=(evt) ? evt :(window.event) ?window.event : ""; 
if(flag) 
{   document.all.kv.style.top=sobytie.clientY-25; 
    document.all.kv.style.left=sobytie.clientX-25; <  } 
} 
function osvobodi() 
{   flag=false;//устанавливается запрет на перетаскивание 
} 
function zachvat() 
{ flag=true;//Перетаскивание разрешается 
} 
</SCRIPT> 
</html>

В отличие от первого варианта во втором явно вызывается одна функция. Строка

предписывает при загрузке HTML-документа вызвать функцию init(). В результате выполнения функции init() события, происходящие с объектом, имеющим идентификатор kv, будут вызывать выполнение функций dragIt, osvobodi и zachvat. Объект kv – это контейнер <DIV>, задающий красный квадрат, перетаскиваемый мышкой.

Функция zachvat(), разрешающая начать перетаскивание, выполняется при нажатии кнопки мышки на квадрате, то есть когда происходит событие onmousedown. Функция osvobodi() выполняется при отпускании кнопки мышки (событие onmouseup) и запрещает перетаскивание.

Функция dragIt(evt) связана с событием onmousemove и поэтому циклически выполняется в течение всего времени нахождения курсора мышки на фотографии. Параметр evt – это объект события, созданный в ответ на действие пользователя. В Internet Explorer объект события имеет обозначение window.event или просто event. В Mozilla Firefox объект события обозначается как evt. Для совместимости обоих случаев служит условный оператор

sobytie = (evt) ? evt : window.event;

или в более привычной форме

if(evt) sobytie=evt else sobytie=window.event

Задача 5.2. Измените последний пример так, чтобы красный квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.

Следующая работа