Другое

Метод 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-технология постройки сайтов. А более мелких реализаций «драг энд дроп» пруд пруди.

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

Техника безопасности для программиста: что это и нужна ли она?
Другое

Техника безопасности для программиста: что это и нужна ли она?

Введение в React JS. Что это за библиотека и для чего она нужна
Другое

Введение в React JS. Что это за библиотека и для чего она нужна

Реверс массива. Как сделать? Примеры реализации в виде рабочего кода
Другое

Реверс массива. Как сделать? Примеры реализации в виде рабочего кода

Steam Greenlight закрыли. Конец платформы для инди-разработчиков?
Другое

Steam Greenlight закрыли. Конец платформы для инди-разработчиков?