 |
Примеры Javascript |
 |
Коллекция скриптов на Javascript
Метод «Drag and Drop»
Скрипт передвижения изображений в окне браузера с помошью мыши методом «Drag and Drop».
Изображение, которое вы будете двигать должно находится в той же папке, что и сама
страничка со скриптом. В нашем примере изображение имеет имя - img.gif.
Пример скрипта «Drag and Drop»
<html>
<head>
<!-- Приведенный ниже код заключается между тегами <head>...</head> -->
<script language="JavaScript">
flg = (document.all) ? 0 : 1;
var obj;
function mousedown(ev)
{
if (flg)
{
obj = document.layers[ev.target.name];
X=ev.x;
Y=ev.y;
return false;
}
else
{
obj = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function mousemove(ev)
{
if (obj)
{
if (flg)
{
obj.moveTo((ev.pageX-X), (ev.pageY-Y));
}
else
{
obj.pixelLeft = event.clientX-X + document.body.scrollLeft;
obj.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function mouseup()
{
obj = null;
}
if (flg)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
</script>
</head>
<body>
<-- В следующей строчке пропишите реальные пути, где находятся ваши картинки -->
<div id="a" style="position:absolute;left:90;top:100;">
<img src="img.gif" name="a">
</div>
<div id="b" style="position:absolute;left:90;top:150;">
<img src="img.gif" name="b">
</div>
<div id="c" style="position:absolute;left:150;top:100;">
<img src="img.gif" name="c">
</div>
<div id="d" style="position:absolute;left:150;top:150;">
<img src="img.gif" name="d">
</div>
</body>
</html>
|
