HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

<HTML>

<HEAD>

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

<SCRIPT type = "text/javascript">

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;

}

}

</SCRIPT>

</HEAD>

<BODY onMouseMove="move()" onMouseDown = "start()"

onMouseUp = "fMoving = false">

<IMG alt = "Перемещаемый рисунок" width = "100" height = "100">

<P>Перемещаемый текст

<H1>Перемещаемый заголовок</H1>

</BODY>

</HTML>

Документ, текст которого приведен в примере 13.18, после перетаскивания элементов показан на рис. 13.8.

Рис. 13.8. Перетаскивание элементов страницы

Свободно позиционировать можно практически любой элемент страницы, однако наиболее эффектно выглядит перетаскивание изображений. Несмотря на кажущуюся ненужность, перетаскивание элементов может все же оказаться полезным при повышении «дружественности» интерфейса веб‑страниц. Представьте себе, что вы, например, совершаете покупки в интернет‑магазине. Понравился товар – перетаскиваете его изображение в свою корзину (определенная область окна). Хотите отказаться от покупки выбранного ранее товара – перетаскиваете его изображение за пределы корзины. Удобно, не так ли?


-= 174 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня