Перетаскиваемые элементы на JavaScript
Использовать данный скрипт нужно следующим образом:- Создаем окна на странице, они должны быть абсолютно позиционированные, самый внешний элемент div окна и заголовок окна должны иметь свой идентификатор;
- Вставляем скрипт на страницу
<script src='1.js'></script>
- Для каждого окна создаем свой объект, вызывая move_div()
obj_move1=new move_div("идентификатор_окна","идентификатор_заголовка");
Например:
<style>
.div_okno{position:absolute}
.div_zagol_okno{cursor:move;background:url('script11/1.gif')no-repeat;font-weight:bold;color:#8cf}
.div_zagol_okno div {padding-left:10px;padding-right:10px;background:url('script11/2.gif')no-repeat right top}
.div_zagol_okno div div{padding:3px;background:#7c9 url('script11/3.gif');white-space:nowrap}
.content_okno{padding:5px;background:#c0c}
#div_okno1{top:80px;left:400px;width:200px}
#div_okno2{top:220px;left:500px;width:300px}
.block_p{padding:5px 0 5px 20px;border-left:solid 3px #35a}
</style>
<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 src=1.js></script>
<script>
obj_move1=new move_div("div_okno1","zagol_okno1");
obj_move2=new move_div("div_okno2","zagol_okno2")
</script>
Скачать скрипт можно здесь.