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-технология на основе отслеживания событий мыши строится по следующему алгоритму:
Налаживают отслеживание нажатия кнопки мыши на компоненте, который нужно «перенести» при помощи события «mousedown».
Как только произошло нажатие, нужно подготовить компонент к перемещению.
Потом происходит отслеживание мыши при помощи «mousemove», чтобы переместить компонент на новое место расположения, сменив его координаты при помощи «left и top», а также «position:absolute».
Отслеживается событие «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>
Важные пояснения по коду:
Чтобы элемент можно было «перетянуть», ему нужно задать атрибут «draggable» со значением «true»;
Важно указать, что должно произойти, когда элемент перетягивается на странице. За это отвечает функция «drag(elem)». За вызов этой функции отвечает атрибут «ondragstart».
Событие «ondragover» показывает, куда можно «перетянуть и бросить» компонент. Один компонент может быть «скинут» не в другой компонент, а только в «пустое» место на экране.
Атрибут «ondrop» отвечает за «скидывание», поэтому он вызывает функцию «drop(elem)», которая и осуществляет «скидывание».
Заключение
Теперь вы знаете, что такое drag-and-drop — это технология, которая помогает облегчить взаимопонимание между пользователем и компьютером или программированием. В последнее время «перетаскивание» блоков стало очень популярным в веб-разработке. Большинство пользователей слышали про такие сервисы, как «Wix» или «Tilda». Они позволяют создавать сайты без знания программирования. О чем говорить, если даже в такой популярной профессиональной CMS, как Wordpress, при помощи плагинов также организована drag-and-drop-технология постройки сайтов. А более мелких реализаций «драг энд дроп» пруд пруди.
Другое
