Другое

Метод Drag-and-drop: определение, технология и функции

Lorem ipsum dolor

Drag-and-drop — это технология, которая сделала небольшой переворот в веб-разработке и помогла многим начинающим веб-мастерам собственноручно собирать сайты без знания программирования. Те, кто хоть немного знаком с веб-разработкой, понимают, о чем речь.

Drag-and-drop (читается по-русски «драг энд дроп») дословно переводится как «перетяни и кинь» или «бери и брось». По сути, это способ манипулировать элементами на экране устройства. Манипуляции происходят при помощи «мыши», которая «захватывает» элемент и переносит его в нужную часть экрана. «Захват» элемента происходит при помощи клика и удержания левой кнопки мыши в момент наведения курсора на элемент. Потом в состоянии «нажатого клика» элемент переносится в нужную часть экрана и в момент «отжатия клика» становится на новое место.

Drag-and-drop нужно для простого действия — перенести объект на экране. В роли этого объекта может быть что угодно:

  • картинка на каком-либо сайте;

  • панель управления в операционной системе;

  • ярлыки на рабочем столе;

  • блоки веб-страницы в конструкторе сайтов;

  • и др.

Drag-and-drop — что это такое?

Как мы уже писали, метод Drag-and-drop основывается на «переносе объектов по экрану» при помощи мыши.

Современный стандарт HTML5 поддерживает перенос объектов, основываясь на двух технологиях:

  • при помощи специальных событий;

  • при помощи события мыши.

К специальным событиями относятся такие события, как:

  • «dragstart»,

  • «drag»,

  • «dragenter»,

  • «dragleave»,

  • «dragover»,

  • «drop»,

  • «dragend».

Каждое из событий поддерживается современными версиями браузера и по-своему хорошо. Их реализация бывает необходима в очень специфических ситуациях, например, когда нужно организовать «перетаскивание» файла с рабочего стола в окно браузера. Но в большинстве случаев, когда нужно осуществить перетаскивание в пределах окна браузера, специальные события имеют ряд ограничений. Например, нет возможности при помощи них ограничить перенос:

  • только в горизонтальной плоскости;

  • только в вертикальной плоскости;

  • в пределах ограниченной зоны;

  • и другие задачи, которые невозможно реализовать.

Поэтому самой популярной технологией на сегодня остается «драг энд дроп» при помощи отслеживания событий мыши. Именно на событиях мыши организованы популярные конструкторы веб-сайтов, на которых пользователи просто переносят нужные блоки на экран, не задумываясь, что из себя представляет перетаскиваемый блок на программном уровне.

Drag-and-drop: алгоритм действий

Drag-and-drop-технология на основе отслеживания событий мыши строится по следующему алгоритму:

  1. Налаживают отслеживание нажатия кнопки мыши на компоненте, который нужно «перенести» при помощи события «mousedown».

  2. Как только произошло нажатие, нужно подготовить компонент к перемещению.

  3. Потом происходит отслеживание мыши при помощи «mousemove», чтобы переместить компонент на новое место расположения, сменив его координаты при помощи «left и top», а также «position:absolute».

  4. Отслеживается событие «mouseup», которое сигнализирует о том, что кнопка мыши была «отжата». Как только событие произошло, нужно будет завершить технологию «drag-and-drop», остановив перенос компонента и зафиксировав его в новых координатах.

Drag-and-drop: пример в коде

Мы не будем сейчас разрабатывать полноценный конструктор сайта, но пример простого переноса элемента мы покажем. Давайте организуем перенос картинки в пустой прямоугольник. Реализуется это при помощи HTML и JavaScript.

Код будет следующим:

<!DOCTYPE HTML>

<html>

<head>

<script>

function allowDragAndDrop(elem) {

  elem.preventDefault();

}

 

function drag(elem) {

  elem.dataTransfer.setData("text", elem.target.id);

}

 

function drop(elem) {

  elem.preventDefault();

  var data = elem.dataTransfer.getData("text");

  elem.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

 

<div id="myFigure" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

 

<img id="myImage" src="codernet.gif" draggable="true" ondragstart="drag(event)" width="340" height="70">

 

</body>

</html>

 

Важные пояснения по коду:

  1. Чтобы элемент можно было «перетянуть», ему нужно задать атрибут «draggable» со значением «true»;

  2. Важно указать, что должно произойти, когда элемент перетягивается на странице. За это отвечает функция «drag(elem)». За вызов этой функции отвечает атрибут «ondragstart».

  3. Событие «ondragover» показывает, куда можно «перетянуть и бросить» компонент. Один компонент может быть «скинут» не в другой компонент, а только в «пустое» место на экране.

  4. Атрибут «ondrop» отвечает за «скидывание», поэтому он вызывает функцию «drop(elem)», которая и осуществляет «скидывание».

Заключение

Теперь вы знаете, что такое drag-and-drop — это технология, которая помогает облегчить взаимопонимание между пользователем и компьютером или программированием. В последнее время «перетаскивание» блоков стало очень популярным в веб-разработке. Большинство пользователей слышали про такие сервисы, как «Wix» или «Tilda». Они позволяют создавать сайты без знания программирования. О чем говорить, если даже в такой популярной профессиональной CMS, как Wordpress, при помощи плагинов также организована drag-and-drop-технология постройки сайтов. А более мелких реализаций «драг энд дроп» пруд пруди.

Схожие статьи

Повышаем конкурентоспособность на рынке труда: эффективные способы
Другое

Повышаем конкурентоспособность на рынке труда: эффективные способы

Что такое система CRM?
Другое

Что такое система CRM?

Видеокарты Turing. Особенности новой серии видеокарт от NVIDIA
Другое

Видеокарты Turing. Особенности новой серии видеокарт от NVIDIA

Global Hot Spare: что это, для чего нужен и его отличия от Dedicated
Другое

Global Hot Spare: что это, для чего нужен и его отличия от Dedicated