Имеется скрипт который позволяет перемещать обьеты
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drag-and-Drop</title>
<link rel="stylesheet" type="text/css" href="Drag-and-Drop_files/style000.css">
<link rel="shortcut icon" href="Drag-and-Drop_files/favicon0.ico">
<meta http-equiv="Content-Type" content="text/html;" >
<meta name="author" content="Зыков Олег Email:o_leg@land.ru">
<meta name="keywords" content=" JavaScript ">
<meta name="description" content=" JavaScript - примеры с комментариями. Drag-and-Drop ">
<style>
body { background-color:99ccff; font-family:"Verdana","Arial","Times New Roman"; }
#obj1 { position:absolute; top:120px; left:300px; color:"333399"; cursor:move; }
#obj2 { position:absolute; top:150px; left:50px; background-image:url("Drag-and-Drop_files/oblako00.gif"); width:190px; height=115px; cursor:move; }
#obj3 { position:absolute; top:200px; left:300px; background-image:url("Drag-and-Drop_files/solnze00.gif"); width:140px; height:150px; cursor:move; }
#obj4 { position:absolute; top:120px; left:550px; background-image:url("Drag-and-Drop_files/oblako00.gif"); width:190px; height=115px; cursor:move; }
#obj5 { position:absolute; top:400px; left:450px; background-image:url("Drag-and-Drop_files/oblako00.gif"); width:190px; height=115px; cursor:move; }
#obj6 { position:absolute; top:450px; left:100px; color:"333399"; font-size:80%; cursor:move; }
#obj7 { position:absolute; top:20px; left:25px; text-align:left; font-family:'Arial','Verdana','Times New Roman'; font-size:24pt; font-weight:bold; margin-top:10px; margin-right:20px; margin-bottom:10px; margin-left:20px; padding-top:5px; padding-right:100px; padding-left:50px; padding-bottom:5px; background-color:'336699'; cursor:move; }
</style>
<script language="javascript">
/******************************************************************************
Применение - перемещение Drag-and-Drop выбраного объекта.
Комментарий - картинки задаются как фоновое изображение,
если задавать явно, - работает некорректно.
******************************************************************************/
var obj ; //объявляем переменную
function start(n) //функция вызывается при помещении курсора на объект
{
obj = n ; //переменной obj присваивается фактический параметр функции start()
document.onmousedown = move; //вызываем функцию move() событием onmousedown
}
function move() //эта функция была вызвана из функции start()
{
switch (event.type) //при помощи переключателя switch определенному событию от мыши назначается действие
{
case "mousedown": //событие onmousedown определяет координаты контейнера
a = event.offsetX + 3 ; //к получившимся координатам прибавляем 3 ( коррекция, относительно края окна, почему появляется эта разница, - не знаю, но так уж оно есть... )
b = event.offsetY + 3 ;
document.onmousemove = move ; //и передает работу с функцией событию onmousemove
case "mousemove":
document.all(obj).style.pixelLeft = event.x - a ; //расстяние от левого края окна до курсора будет равно координатам курсора относительно окна, минус координаты курсора, относительно контейнера, на момент предыдущего события мыши
document.all(obj).style.pixelTop = event.y - b ;
document.onmouseup = move ; //передача работы с функцией событию onmouseup
break;
case "mouseup":
document.onmousemove = null ; //при событии мыши onmouseup, - событие onmousemove отменяется
break;
}
}
</script>
</head>
<body>
<div id="obj1" onMouseOver="start('obj1')";><h2>Солнце и облака</h2></div>
<div id="obj2" onMouseOver="start('obj2')";></div>
<div id="obj3" onMouseOver="start('obj3')";></div>
<div id="obj4" onMouseOver="start('obj4')";></div>
<div id="obj5" onMouseOver="start('obj5')";></div>
<div id="obj6" onMouseOver="start('obj6')";><p>Все, что находится на этой странице, <br>можно перемещать по всему экрану, <br>используя “Drag-and-Drop”. </p></div>
<div id="obj7" onMouseOver="start('obj7')";><a class="headLink" href="http://www.legal.web.ur.ru/index.html" title="Вернутся на главную страницу">legal.web.ur.ru</a></div>
</body>
</html>
<!-- This document saved from http://www.legal.web.ur.ru/drag_and_drop.html -->
|
Как его можно модифицировать что бы можно было перемешать объект с определенной скоростью т.е что бы происходила небольшая задержка
|
, я где-то уже такой прием встречал, но не касаемо программирования.