создание и продвижение сайта (вбиваю в ТОП-10, как гвозди)Настройка и сопровождение платной рекламы яндекс.директ

Перетаскиваемые элементы на JavaScript

Использовать данный скрипт нужно следующим образом:
  1. Создаем окна на странице, они должны быть абсолютно позиционированные, самый внешний элемент div окна и заголовок окна должны иметь свой идентификатор;
  2. Вставляем скрипт на страницу

    <script src='1.js'></script>

  3. Для каждого окна создаем свой объект, вызывая 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>

Заголовок окна
Вы можете перетащить это окошко!
Окно, которое можно перетащить
Наведите указатель мыши на заголовок окна, нажмите на левую клавишу мыши, и, не отпуская, перетащите окно в другое место.

Скачать скрипт можно здесь.

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

Ваше письмо×
Free Web Hosting