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


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

1910
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: