Background Image

Drag and Drop

Script

by — Category Script on

Drag-and-drop (в переводе с английского означает буквально тащи-и-бросай; Бери-и-Брось) — способ оперирования элементами интерфейса в интерфейсах пользователя (как графическим, так и текстовым, где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь» или сенсорного экрана.

Drag’n’Drop – это возможность захватить мышью элемент и перенести его. В свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций. Подобный способ можно часто встретить на сайтах элитных интернет-магазинов, где для того чтобы купить товар, его нужно "захватить" и перенести к себе в корзину. На упрощенных сайтах, чтобы купить товар нужно просто кликнуть в определенном месте или поставить галочку и товар сам перенесется в вашу корзинку, но согласитесь, сейчас это уже не столь современно. Перенос мышкой смог заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag’n’Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.

И так, давайте рассмотрим самый простой способ установки DnD при помощи CSS и JavaScript.

CSS

 .drag_obj { position:absolute; cursor:move; text-align:center; z-index:999;} 

Разберем подробнее. Весь наш блок будет основан на классе  .drag_obj, которому мы присвоили ряд свойств: абсолютное позиционирование, захват курсора и свойство z-index, необходимое нам только в том случае, когда мы хотим перекрыть несколько других блоков и поставить новый блок поверх них.

Переходим к разметке, здесь всё просто.

HTML

<span class="drag_obj" onmousedown="drag_object(event, this)">здесь размещаем картинку, блок или еще что-нибудь</span>

Ну и последний элемент - это библиотека. Здесь у нас тоже всё довольно просто и подробно расписано.

Алгоритм Drag’n’Drop

Основной алгоритм Drag’n’Drop выглядит так:

  1. Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события mousedown.
  2. При нажатии – подготовить элемент к перемещению.
  3. Далее отслеживаем движение мыши через mousemove и передвигаем переносимый элемент на новые координаты путём смены left/top и position:absolute.
  4. При отпускании кнопки мыши, то есть наступлении события mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.

JS

function drag_object( evt, obj ) 
 { 
 evt = evt || window.event; 
 // готовность к перетаскиванию
 obj.clicked = true; 
 // устанавливаем первоначальные значения координат объекта 
 obj.mousePosX = evt.clientX; 
 obj.mousePosY = evt.clientY; 
 // отключаем обработку событий по умолчанию 
 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; 
 }  

Отличия от HTML5 Drag’n’Drop

В современном стандарте HTML5 есть поддержка Drag’n’Drop при помощи специальных событий. Эти события поддерживаются всеми современными браузерами и у них есть свои интересные особенности, например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому. Но в плане именно Drag’n’Drop у них есть существенные ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны.

Есть и другие интерфейсные задачи, которые такими встроенными событиями реализовать невозможно, поэтому здесь мы рассматривали только Drag’n’Drop при помощи событий мыши. Рассматриваемые приёмы в общем-то применяются не только в Drag’n’Drop, но и для любых интерфейсных взаимодействий вида «захватить – потянуть – отпустить».  Они заслуживают отдельного рассмотрения.

 

Если Вам понравился данный материал и/или вы нашли способ его применения на своем сайте, не забудьте рассказать о нем в комментариях и поделиться с друзьями, нажав на кнопки социальных сетей. Желаем вам удачи и побольше творческих идей.


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят: Похожие материалы не найдены
Feedback: 1
0
Как-то слишком просто, но круто! Остальные классы можно самому придумать, а то везде где видел много кода. А куки можно приделать?

Leave a Comment

Имя *:
Email *:
Код *:
Menu