<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div>
</div>
Определить, что пользователь нажал на клавишу мыши, когда курсор был над заголовком окна, нам поможет обработчик события onmousedown, который назначим заголовку окна (точнее объекту заголовка окна)
obj_zagol_okno.onmousedown = save_delta_koor;
obj_zagol_okno.addEventListener("onmousedown",save_delta_koor,false);
x=obj_evt.pageX;
y=obj_evt.pageY;
x=window.event.clientX;
y=window.event.clientY;
document.onmousemove = motor_okno;
document.addEventListener("onmousemove",motor_okno,false);
document.onmouseup = clear_delta_koor;
document.onmousemove = null;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Окна</title>
<style type='text/css'>
body { margin:0px; padding:0px; font-family: verdana, sans-serif; font-size:12px; }
h1 { text-align:center; margin-top:10px; }
.div_okno { position:absolute; }
.div_zagol_okno { cursor:move;
background: url("./images/fon_left_zagol.gif") no-repeat;
font-weight:bold; color:#8CF4EF; }
.div_zagol_okno div { padding-left:10px; padding-right:10px;
background: url("./images/fon_right_zagol.gif") right top no-repeat; }
.div_zagol_okno div div { padding:3px; background:#7c9992 url("./images/fon_zagol.gif"); white-space:nowrap; }
.content_okno { padding:5px; background:#C0C0C0; }
#div_okno1 { top:120px; left:300px; width:300px; }
</style>
</head>
<body>
<h1>Перетаскиваемые элементы на JavaScript</h1>
<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div>
</div>
<script type='text/javascript'>
/* определим тип браузера */
var bIE=0;bOp=0;bFF=0;
var verBr=navigator.userAgent;
if (verBr.indexOf("Opera")!=-1)
bOp=1;
else
{
if (verBr.indexOf("MSIE")!=-1)
bIE=1;
else
{
//if (verBr.indexOf("Firefox")!=-1)
bFF=1;
}
}
setup_mouse("div_okno1","zagol_okno1");
var obj_okno;
var obj_zagol_okno;
delta_x=0;
delta_y=0;
function setup_mouse(id_div_okno,id_div_zagol)
{
obj_okno=document.getElementById(id_div_okno);
obj_zagol_okno=document.getElementById(id_div_zagol);
obj_zagol_okno.onmousedown=save_delta_koor;
if (bOp || bFF)
{
obj_zagol_okno.addEventListener("onmousedown",save_delta_koor,false);
}
document.onmouseup=clear_delta_koor;
}
function save_delta_koor(obj_evt)
{
if (obj_evt)
{
x=obj_evt.pageX;
y=obj_evt.pageY;
}
else
{
x=window.event.clientX;
y=window.event.clientY;
if (bIE)
{
y-=2;
x-=2;
}
}
x_okno=obj_okno.offsetLeft;
y_okno=obj_okno.offsetTop;
delta_x=x_okno-x;
delta_y=y_okno-y;
document.onmousemove=motor_okno;
if (bOp || bFF)
document.addEventListener("onmousemove",motor_okno,false);
}
function clear_delta_koor()
{
document.onmousemove=null;
}
function motor_okno(obj_event)
{
if (obj_event)
{
x=obj_event.pageX;
y=obj_event.pageY;
}
else
{
x=window.event.clientX;
y=window.event.clientY;
if (bIE)
{
y-=2;
x-=2;
}
}
new_x=delta_x+x;
new_y=delta_y+y;
obj_okno.style.top=new_y+"px";
obj_okno.style.left=new_x+"px";
}
</script>
</body>
</html>
В примере так же добавлен код для внешнего оформления элементов страницы, с ним я думаю все понятно. Посмотреть работу данного скрипта можно на странице тут
Использовать данный скрипт нужно следующим образом:
<script type='text/javascript' src='elementmove.js'></script>
obj_move1 = new move_div("идентификатор_окна","идентификатор_заголовка");
Например
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Перетаскиваемые окна</title>
<style type='text/css'>
body { margin:0px; padding:0px; font-family: verdana, sans-serif; font-size:12px; }
h1 { text-align:center; margin-top:10px; }
.div_okno { position:absolute; }
.div_zagol_okno { cursor:move;
background: url("./images/fon_left_zagol.gif") no-repeat;
font-weight:bold; color:#8CF4EF; }
.div_zagol_okno div { padding-left:10px; padding-right:10px;
background: url("./images/fon_right_zagol.gif") right top no-repeat; }
.div_zagol_okno div div { padding:3px; background:#7c9992 url("./images/fon_zagol.gif"); white-space:nowrap; }
.content_okno { padding:5px; background:#C0C0C0; }
#div_okno1 { top:80px; left:10px; width:200px; }
#div_okno2 { top:120px; left:300px; width:300px; }
</style>
</head>
<body>
<h1>Перетаскиваемые элементы на JavaScript</h1>
<div id="div_okno1" class="div_okno">
<div id="zagol_okno1" class="div_zagol_okno"><div><div>
Заголовок окна
</div></div></div>
<div class="content_okno"><div>
Вы можете перетащить это окошко!
</div></div>
</div>
<div id="div_okno2" class="div_okno">
<div id="zagol_okno2" class="div_zagol_okno"><div><div>
Окно, которое можно перетащить
</div></div></div>
<div class="content_okno"><div>
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу
мыши, и, не отпуская, перетащите окно в другое место.
</div></div></div>
<script type='text/javascript' src='elementmove.js'></script>
<script type='text/javascript'>
obj_move1 = new move_div("div_okno1","zagol_okno1");
obj_move2 = new move_div("div_okno2","zagol_okno2");
</script>
</body>
</html>
Молодцы!!!
Я не очень сильна в java script поэтому очень прошу мне помочь.