2015-04-01
468
Напишем сценарий, который позволяет перетаскивать изображения.
Листинг:
<HTML>
<head>
<script>
var cur="";
var d=document
function down_action()
{if (window.event.srcElement.tagName= ="IMG")
{cur=window.event.srcElement.id
d.all[cur].style.left=window.event.clientX-50;
d.all[cur].style.top=window.event.clientY-50
}
}
function up_action(){cur="";}
function move_action()
{
if(cur!="")
{
d.all[cur].style.left=window.event.clientX-50;
d.all[cur].style.top=window.event.clientY-50;
}
event.cancelBubble=true;
event.returnValue=false;
}
</script>
</head>
<body bgcolor=silver onMouseDown=down_action()
onMouseMove=move_action()
onMouseUp=up_action()>
<h3 align=center onMouseOut="this.style.color='black'" onMouseOver="this.style.color='white'">
Перетаскивание изображения</h3>
<img border=1 height=100 width=100 id=p1 src="1.jpg" style="position:absolute;left:100; top:100;">
<img border=1 height=100 width=100 id=p2 src="2.jpg" style="position:absolute;left:250; top:100;">
<img border=1 height=100 width=100 id=p3 src="3.jpg" style="position:absolute;left:100; top:250;">
<img border=1 height=100 width=100 id=p4 src="4.jpg" style="position:absolute;left:250; top:250;">
</body>
</HTML>
Переменная cur используется для хранения данных об объекте, который стал источником события "нажатие кнопки мыши". В сценарии проверяется, является ли этот объект изображением. При движении курсора мыши изображение как бы движется за курсором. При этом вычисляются текущие координаты изображения и изображение помещается на новое место.
