Перетаскивание объектов в HTML средствами JS


Перетаскивание объектов в HTML средствами JS

1833
10 из 10
Проголосовало: 2




Большинство из вас, наверное, уже видели, как на некоторых сайтах, различные элементы HTML-верстки можно «ухватить мышой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи». В статье я расскажу, как, при помощи небольшого куска кода на Javascript, реализовать подобный функционал на своём сайте. Итак, поехали.

Во-первых, для того, чтобы объекты на страницы могли свободно перемащаться, независимо от соседних элементов, мы выставим им абсолютное позиционирование (position:absolute) и начальные координаты (left и top) в CSS.
Во-вторых, главным участником всех действий в JS, послужит конечно-же стандартный объект window.event, при помощи которого мы будет определять координаты объекта.
В целом, замысел будет таков: по клику левой кнопкой мыши на объекте мы устанавливаем «флаг» (obj.clicked = true) на объект (HTML DOM-элемент), означающий что «объект выбран и можно инициализировать его перемещение». В дальнейшем, после этого действия, все перемещения указателя по экрану на странице сайта, будет отрабатывать метод document.onmousemove, в котором мы: получаем новые координаты перемещаемого объекта, меняем его позицию для «left и top» CSS-свойств.
Для клика по объекту, будет использовано событие onmousedown, вместо onclick, т.к оно срабатывает раньше и не требует отпускания кнопки мыши. После того, как мы переместили объект в нужную позицию на странице и отпустили кнопку мыши, срабатывает событие document.onmouseup и убирает значение флага (obj.clicked = false).
Также, для того чтобы избежать всяческих глюков с тем, когда при перемещении объекта браузер по умолчанию обрабатывает свои встроенные события, мы будем вызывать метод объекта event — preventDefault(). Данный скрипт тестировался и отлично себя повел в Opera 9+, Firefox 2+, Safari 2, Google Chrome, а вот в IE (6,7) хотя перетаскивание и работает, но довольно-таки глючно (в этих версиях IE у объекта event нету метода preventDefault, хотя есть свойство returnValue, что должно выполнять посути туже функцию, но оно почему-то не помогло).

Между head вставляем:

Code
<style type="text/css">

  * { font:17px serif; color:black; margin:0; padding:0; }
  * html .pnghack { filter:expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+ this.src +')'); width:expression(10000000000); height:expression(10000000000); }
  body { padding:20px; }
  h1 { margin-bottom:15px; }
   
  .drag_obj { position:absolute; top:60px; left:30px; cursor:move; text-align:center; z-index:100; }
  .drag_obj span { display:block; padding:1px 3px; background:white; }
  .drag_obj:hover * { color:gray; }
   
  .drag_window { position:absolute; top:60px; width:450px; border:3px double #333; z-index:10; }
  .drag_window .title { position:relative; display:block; color:white; background:#333; padding:10px; cursor:move; -width:100%; }

</style>

<script type="text/javascript">

function drag_object( evt, obj )  

{  

  evt = evt || window.event;  

   

  // флаг, которые отвечает за то, что мы кликнули по объекту (готовность к перетаскиванию)  

  obj.clicked = true;  

   

  // устанавливаем первоначальные значения координат объекта  

  obj.mousePosX = evt.clientX;  

  obj.mousePosY = evt.clientY;  

  // отключаем обработку событий по умолчанию, связанных с перемещением блока (это убирает глюки с выделением текста в других HTML-блоках, когда мы перемещаем объект)  

  if( evt.preventDefault ) evt.preventDefault();  

  else evt.returnValue = false;  

   

  // когда мы отпускаем кнопку мыши, убираем «проверочный флаг»  

  document.onmouseup = function(){ obj.clicked = false }  

   

  // обработка координат указателя мыши и изменение позиции объекта  

  document.onmousemove = function( evt )  

  {  

  evt = evt || window.event;  

  if( obj.clicked )  

  {  

  posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );  

  posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );  

  mousePosX = evt.clientX;  

  mousePosY = evt.clientY;  

  obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';  

  obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';  

   

  obj.mousePosX = mousePosX;  

  obj.mousePosY = mousePosY;  

  }  

  }  

}

function setcookie( name, value, timeout )  

{  

  timeout = timeout || 1000*60*60*24;  

  expires = (new Date((new Date).getTime() + timeout)).toUTCString();  

  document.cookie = name + '=' + value + ';expires=' + expires;  

}
</script>

А это то что будет перемещатся:

Code
<span class="drag_obj" onmousedown="drag_object(event, this)">
<img src="http://webo4ka.ru/webo4ka/images/logo.png" border="0"/>
</span>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 2

kiidii
0
kiidii написал: Написано 26 Сентября 2013 в 20:03
Комментарий №2
А можно сделать так,что-бы при перемещении не происходил клик по кнопки(перемещение без перехода по ссылке спрятанной за картинкой)?Чтобы изначально иконки стояли в ряд,а не одна за другой?И последнее,можно ли,сделать так,чтобы браузер запоминал расположение иконок?

ekkko
0
ekkko написал: Написано 02 Августа 2011 в 21:43
Комментарий №1
Мой скрипт звизданули.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: