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

Иногда при разработке ресурса думаешь, что внедрение на страницу сайта перетаскиваемого элемента (например, всплывающего окна, сделанного с помощью блока DIV) существенно облегчило бы работу с сайтом. Поэтому рассмотрим, как можно сделать перетаскиваемые элементы на JavaScript.
Перетаскиваемый элемент в принципе может быть любым, но для примера рассмотрим, как можно сделать перетаскиваемое окно, выполненное с помощью блока DIV. Причем перетаскиваться окно должно за заголовок. Итак, для начала посмотрим, что нужно сделать, в общем, для создания перетаскиваемого элемента
  1. Перетаскиваемый элемент (блок DIV в нашем случае) должен быть абсолютно позиционированным;
  2. После нажатия на клавишу мыши, когда курсор находится над нужным нам элементом (в данном случае над заголовком окна), запоминаем разницу координат нашего перемещаемого окна и указателя мыши;
  3. Если клавиша не была отпущена, и пользователь перемещает указатель мыши, то получаем новые координаты окна, просто суммируя запомненную разницу координат и новые координаты указателя мыши.

Теперь рассмотрим подробнее.
Как сделать абсолютно позиционируемый блок DIV, наверное, понятно: нужно в каскадных таблицах стилей прописать для блока свойство position со значением absolute. Код HTML окна

 

Код
<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;

В соответствии со стандартами W3C DOM обработчики событий задаются методом addEventListener() (который поддерживается браузерами Firefox и Opera)
Код
obj_zagol_okno.addEventListener("onmousedown",save_delta_koor,false);

При использовании этого метода после срабатывания события вызываемая функция автоматически получит объект события в качестве единственного аргумента. То есть при работе скрипта в браузерах Firefox и Opera функция save_delta_koor(obj_evt) получит в переменной obj_evt объект события, в то время как при работе в браузере Internet Explorer в переменной obj_evt ничего не будет. В браузерах Firefox и Opera координаты курсора мыши находятся с помощью свойств pageX и pageY полученного объекта события
Код
x=obj_evt.pageX;
y=obj_evt.pageY;

В браузере Internet Explorer координаты курсора мыши определяются с помощью объекта window.event и свойств clientX и clientY
Код
x=window.event.clientX;
y=window.event.clientY;

После нажатия на клавишу мыши, запустится функция save_delta_koor(). Функция save_delta_koor() вычисляет координаты мыши и координаты окна (блока DIV с id = "zagol_okno1"), а затем разницу координат (delta_x и delta_y). Для отслеживания перемещения курсора будем использовать обработчик события onmousemove, который назначим всему документу
Код
document.onmousemove = motor_okno;

Для браузеров Firefox и Opera также зададим обработчик событий в соответствии со стандартами
Код
document.addEventListener("onmousemove",motor_okno,false);

В этом случае функция motor_okno() при работе скрипта в браузерах Firefox и Opera получит в качестве единственного аргумента объект события.
При перемещении указателя мыши будет вызываться функция motor_okno(), которая вычисляет новые координаты указателя мыши, а затем новые координаты окна, и соответственно перемещает наше окно.
Перемещать окно можно лишь при нажатой клавише мыши, поэтому после отпускания клавиши нужно остановить выполнение функции motot_okno(). Как вы помните, эта функция вызывается обработчиком события onmousemove объекта document. Перехватить момент, когда пользователь отпустил клавишу мыши, поможет обработчик события onmouseup, который назначим всему документу
Код
document.onmouseup = clear_delta_koor;

Теперь, когда пользователь отпустит клавишу мыши, будет вызвана функция clear_delta_koor(), которая "очистит" обработчик события перемещения курсора мыши
Код
document.onmousemove = null;

Для удобства использования скрипта создадим функцию setup_mouse(), которая будет инициализировать необходимые объекты и обработчики событии. Этой функции необходимо лишь передать идентификаторы блоков окна и заголовка.
Для определения, в каком браузере работает страница, в самом начале поместим несколько строк JavaScript-а, которые и определят тип браузера.

 

Код
<!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>

 

В примере так же добавлен код для внешнего оформления элементов страницы, с ним я думаю все понятно. Посмотреть работу данного скрипта можно на странице тут
Скрипт можно вынести в отдельный файл и переделать так, чтобы он сразу работал с несколькими окнами на одной странице. Приводить код здесь не буду, помещу в архив, и скачать его можно по ниже приведенной ссылке:
Описание: Скрипт "Перетаскиваемые элементы на JavaScript"
Скачать Размер: 5.35 KB. Количество скачиваний: 2253

 

Использовать данный скрипт нужно следующим образом:
  1. Создаем окна на странице, они должны быть абсолютно позиционированные, самый внешний элемент div окна и заголовок окна должны иметь свой идентификатор;
  2. Вставляем скрипт на страницу
    Код
    <script type='text/javascript' src='elementmove.js'></script>

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

Посмотреть работу данного скрипта можно на странице тут
Опубликовано 14 февраля 2009 г.
Комментарии к публикации
Всего комментариев: 21
прохожий: Serg | 11.03.2009, 22:30 #
Прикольный javascript-скрипт, легко и просто внедряется на сайт
прохожий: Гость | 23.04.2009, 22:47 #
Отличная статья! Скажите, а как можно для разных пользователей запомнить расположение передвинутых объектов.
Суперадмин: | 24.04.2009, 06:36 #
Наверное можно запомнить расположение передвинутых объектов с помощью куков, но в javascript ни разу не использовал куки, поэтому посоветовать ничего не могу конкретного.
прохожий: guest | 29.05.2009, 06:51 #
Автор скрипта просто молодец! Отличный скрипт, который может быть использован как основа для сотен различных задумок. Большое спасибо!
прохожий: Заинтересованный | 30.05.2009, 08:22 #
Вопрос: а зачем для IE строки: y-=2; x-=2; ?
Суперадмин: | 31.05.2009, 20:43 #
Потому что в IE отсчет координат идет иначе, чем в других браузерах. Для выравнивания модели отсчета координат курсора и вводится данная поправка (в данном случае это не важно, но для общего развития это полезно знать!).
прохожий: Гость | 06.08.2009, 05:18 #
СПАСИБО!!!
прохожий: mannn | 28.08.2009, 08:07 #
сайт: 52-nn.ru/
Очень полезная информация, уникальный сайт!
Молодцы!!!
прохожий: Денис | 21.12.2009, 17:48 #
Спасибо! Очень доходчиво и в примере показали как двигать окно.
прохожий: Виктория | 21.02.2010, 04:03 #
Здравствуйте, извините, не могли бы вы мне помочь? Подскажите пожалуйста, как можно сделать так, чтобы после перезагрузки все передвинутые окошки оставались на тех же местах, а не возвращались на первоначальное место.
Я не очень сильна в java script поэтому очень прошу мне помочь.
Суперадмин: | 24.02.2010, 07:12 #
Можно сделать с помощью куков, смотрите в этом направлении.
прохожий: Fraer | 27.05.2010, 02:49 #
Спасибо автору за ину, оч помогло=)
прохожий: Дцпал | 12.07.2010, 01:41 #
Спасибо за информацию. Это искал, это и нашёл. Занесу ваш сайт в закладки.
прохожий: Александр | 14.08.2010, 03:28 #
сайт: sverdlles.ru
А можно таким образом сделать корзину товаров, чтобы помещать туда выбранный продукт?
Суперадмин: | 04.09.2010, 20:30 #
Можно! Только зачем?!
прохожий: Victor | 12.12.2012, 01:19 #
E-mail: написать сообщение
Подскажите, а как можно сделать, чтобы место расположения объекта сохранялось при его перемещении? Нужно подключать базу данных или как?
прохожий: iks | 28.01.2013, 16:01 #
Не помешал бы еще пример перетаскивания внутри блока и ограничения этого перетаскивания размерами родительского блока
прохожий: Саша | 23.05.2014, 16:29 #
E-mail: написать сообщение
одно не учел))))окно уходит за рамки браузера
Суперадмин: | 08.08.2015, 00:15 #
Этот вопрос вы уже самостоятельно попробуйте решить! :)
прохожий: Роман | 21.04.2015, 00:03 #
E-mail: написать сообщение
А можно ли сделать так чтоб элементы невозможно было наложить друг на друга при перетаскивании?
Суперадмин: | 08.08.2015, 00:14 #
Нет.
Вход в аккаунт
Новости сайта