Веб-компас сайтостроителей
/ Все статьи / JavaScript / Примеры на JavaScript / Перетаскиваемые элементы на JavaScript

Перетаскиваемые элементы на 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. Количество скачиваний: 2548

 

Использовать данный скрипт нужно следующим образом:
  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>

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