<?php $t="Перетаскиваемые элементы на JavaScript"; include("../1.php") ?>
<style type='text/css'>
.div_okno {position:absolute}
.div_zagol_okno {cursor:move; background:url('script11/1.gif') no-repeat; font-weight:bold; color:#8cf4ef}
.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:#7c9992 url('script11/3.gif'); white-space:nowrap}
.content_okno {padding:5px; background:#c0c0c0}
#div_okno1 {top:80px; left:8px; width:200px}
#div_okno2 {top:220px; left:8px; width:300px}
.block_p {padding:5px 0 5px 20px; border-left:solid 3px #35a}
</style>
Использовать данный скрипт нужно следующим образом:
<ol> 
<li>Создаем окна на странице, они должны быть абсолютно позиционированные, самый внешний элемент div окна и заголовок окна должны иметь свой идентификатор;
<li>Вставляем скрипт на страницу
<p><code>
&lt;script type='text/javascript' src='elementmove.js'&gt;&lt;/script&gt;
</code>
<li>Для каждого окна создаем свой объект, вызывая move_div()
<p><code>
obj_move1 = new move_div("идентификатор_окна","идентификатор_заголовка");
</code>
</ol>
<!-- пример -->
<p>Например:
<p><code>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
<br>&lt;html&gt;
<br>&lt;head&gt;
<br>&lt;title&gt;Перетаскиваемые окна&lt;/title&gt;
<br>&lt;style type='text/css'&gt;
<br>.div_okno {position:absolute;}
<br>.div_zagol_okno {cursor:move; background:url('script11/fon_left_zagol.gif') no-repeat; font-weight:bold; color:#8CF4EF}
<br>.div_zagol_okno div {padding-left:10px; padding-right:10px; background:url('script11/fon_right_zagol.gif') no-repeat right top}
<br>.div_zagol_okno div div {padding:3px; background:#7c9992 url('script11/fon_zagol.gif'); white-space:nowrap}
<br>.content_okno {padding:5px; background:#C0C0C0}
<br>#div_okno1 {top:80px; left:400px; width:200px}
<br>#div_okno2 {top:220px; left:500px; width:300px}
<br>.block_p {padding:5px 0 5px 20px; border-left:solid 3px #35a}
<br>&lt;/style&gt;
<br>&lt;/head&gt;
<br>&lt;body&gt;
<br>&lt;h1&gt;Перетаскиваемые элементы на JavaScript&lt;/h1&gt;
<br>&lt;div id="div_okno1" class="div_okno"&gt;
<br>&lt;div id="zagol_okno1" class="div_zagol_okno"&gt;&lt;div&gt;&lt;div&gt;
<br>Заголовок окна
<br>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
<br>&lt;div class="content_okno"&gt;&lt;div&gt;
<br>Вы можете перетащить это окошко!
<br>&lt;/div&gt;&lt;/div&gt;
<br>&lt;/div&gt;
<br>&lt;div id="div_okno2" class="div_okno"&gt;
<br>&lt;div id="zagol_okno2" class="div_zagol_okno"&gt;&lt;div&gt;&lt;div&gt;
<br>Окно, которое можно перетащить
<br>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
<br>&lt;div class="content_okno"&gt;&lt;div&gt;
<br>Наведите указатель мыши на заголовок окна, нажмите на левую клавишу мыши, и, не отпуская, перетащите окно в другое место.
<br>&lt;/div&gt;&lt;/div&gt;
<br>&lt;/div&gt;
<br>&lt;script type='text/javascript' src='elementmove.js'&gt;&lt;/script&gt;
<br>&lt;script type='text/javascript'&gt;
<br>obj_move1 = new move_div("div_okno1","zagol_okno1");
<br>obj_move2 = new move_div("div_okno2","zagol_okno2");
<br>&lt;/script&gt;
<br>&lt;/body&gt;
<br>&lt;/html&gt;
</code>
<!-- пример -->
<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='script11/1.txt'></script>
<script type='text/javascript'>obj_move1 = new move_div("div_okno1","zagol_okno1");obj_move2 = new move_div("div_okno2","zagol_okno2");</script>
<p>Скачать скрипт можно <a target='_blank' href="script11/script11.zip">здесь</a>.

<?php include("../2.php") ?>