Drag and Drop API

Drag and Drop API — это программный интерфейс (API) веб-браузеров, предоставляющий возможность реализации перетаскивания элементов интерфейса (drag and drop) с помощью событий JavaScript. API позволяет пользователю захватывать визуальный объект (например, файл, текст, изображение или HTML-элемент) мышью или касанием, перемещать его в пределах окна браузера и отпускать в определённой целевой области, инициируя тем или иным образом заданное действие.

История и стандартизация

Механизм перетаскивания объектов в пользовательских интерфейсах существовал задолго до появления веба (например, в операционных системах). В вебе необходимость в таком взаимодействии возникла с развитием сложных веб-приложений (Rich Internet Applications). Первоначально реализация drag and drop была нестандартизирована и зависела от браузера.

В начале 2000-х годов Microsoft внедрила собственную модель событий перетаскивания в Internet Explorer. Позднее, в рамках работы над спецификацией HTML5, была разработана унифицированная модель Drag and Drop, которая была включена в черновик спецификации HTML5. В 2014 году спецификация HTML5 стала рекомендацией W3C, и Drag and Drop API стал частью стандарта.

На сегодняшний день Drag and Drop API поддерживается всеми современными браузерами (Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge), хотя существуют некоторые различия в реализации (например, в обработке событий на мобильных устройствах). В России, как и в других странах, API используется в веб-разработке без каких-либо ограничений, за исключением общих требований законодательства о персональных данных и защите информации.

Основные понятия и архитектура

Drag and Drop API основан на модели событий. Взаимодействие делится на две ключевые роли:

Перетаскиваемый элемент (Drag Source / Draggable): элемент, который пользователь может захватить и переместить. Чтобы элемент стал перетаскиваемым, ему необходимо присвоить атрибут draggable="true".
Цель перетаскивания (Drop Target): элемент, на который пользователь может отпустить перетаскиваемый объект. По умолчанию большинство HTML-элементов не являются целями; для их активации необходимо отменить действие браузера по умолчанию для события dragover или dragenter.

События Drag and Drop API

API определяет семь основных событий, которые возникают на разных этапах операции перетаскивания:

dragstart (на перетаскиваемом элементе): возникает в момент начала перетаскивания. Используется для настройки данных, которые будут переданы (например, с помощью метода dataTransfer.setData()).
drag (на перетаскиваемом элементе): возникает непрерывно во время перемещения элемента.
dragenter (на целевой области): возникает, когда перетаскиваемый элемент впервые пересекает границу целевой области.
dragover (на целевой области): возникает непрерывно, пока перетаскиваемый элемент находится над целевой областью. Для разрешения сброса необходимо вызвать event.preventDefault().
dragleave (на целевой области): возникает, когда перетаскиваемый элемент покидает границу целевой области.
drop (на целевой области): возникает, когда пользователь отпускает перетаскиваемый элемент над целевой областью (при условии, что событие dragover было обработано). Это основное событие, в котором выполняется логика обработки данных.
dragend (на перетаскиваемом элементе): возникает в момент завершения операции перетаскивания (независимо от того, был ли сброс успешным или нет).

Объект DataTransfer

Центральным элементом API является объект DataTransfer. Он доступен через свойство dataTransfer всех событий перетаскивания. Этот объект служит для хранения и передачи данных между источником и целью.

Основные методы и свойства DataTransfer:

setData(format, data): устанавливает данные для передачи. format — строка, указывающая MIME-тип (например, text/plain, text/html, text/uri-list). data — строка с данными.
getData(format): извлекает данные, установленные ранее с помощью setData().
clearData([format]): удаляет данные для указанного формата или все данные.
items: возвращает объект DataTransferItemList, содержащий все элементы данных.
files: возвращает объект FileList, содержащий файлы, перетаскиваемые из файловой системы (например, из проводника Windows или Finder на macOS).
effectAllowed: определяет, какой тип операции разрешён (например, copy, move, link). Устанавливается в событии dragstart.
dropEffect: определяет, какой эффект будет отображаться для пользователя (например, курсор с плюсом для копирования). Устанавливается в событиях dragenter и dragover.

Применение и примеры

Drag and Drop API широко используется в веб-разработке для создания интерактивных интерфейсов.

Пример 1: Перетаскивание файлов

Наиболее распространённое применение — загрузка файлов на сервер. Пользователь может перетащить файлы из проводника операционной системы в специальную область на веб-странице. Событие drop обрабатывает объект dataTransfer.files, из которого можно получить список файлов и отправить их на сервер (например, с помощью FormData и XMLHttpRequest или fetch).

Пример 2: Реорганизация элементов интерфейса

API позволяет создавать интерфейсы, в которых пользователь может перетаскивать элементы списка, карточки на доске (например, в стиле Trello) или виджеты на панели. В этом случае данные передаются в формате text/plain или text/html, содержащем идентификатор или HTML-код перетаскиваемого элемента.

Пример 3: Перетаскивание между приложениями

Drag and Drop API поддерживает взаимодействие между различными вкладками браузера и даже между браузером и другими приложениями (например, текстовым редактором). Для этого используются стандартные MIME-типы, такие как text/plain или text/uri-list.

Ограничения и особенности

Поддержка на мобильных устройствах: Стандартный Drag and Drop API имеет ограниченную поддержку на сенсорных экранах. На iOS (Safari) и Android (Chrome) он может работать некорректно или требовать дополнительных полифиллов (библиотек, эмулирующих поведение API). Для полноценной поддержки мобильных устройств часто используются специализированные библиотеки (например, interact.js или SortableJS).
Безопасность: Браузеры накладывают ограничения на доступ к данным из DataTransfer в целях безопасности. Например, данные, перетаскиваемые из другого источника (кросс-домен), могут быть недоступны для чтения.
Производительность: Обработка событий drag и dragover может быть ресурсоёмкой, особенно при большом количестве элементов. Рекомендуется минимизировать сложные вычисления в этих обработчиках.
Сложность реализации: Несмотря на кажущуюся простоту, реализация корректного drag and drop с учётом всех состояний (начало, перемещение, сброс, отмена) требует тщательного программирования и тестирования.

Альтернативы

Из-за ограничений стандартного API, особенно на мобильных устройствах, разработчики часто используют сторонние библиотеки:

SortableJS: популярная библиотека для создания перетаскиваемых списков с поддержкой сенсорных устройств.
interact.js: более универсальная библиотека для управления жестами (перетаскивание, масштабирование, вращение).
React DnD: библиотека для React, реализующая drag and drop с использованием концепции Flux/Redux.

Источники

Спецификация HTML Living Standard (WHATWG), раздел "Drag and drop".
Спецификация W3C HTML5, раздел "Drag and drop".
Документация MDN Web Docs (Mozilla Developer Network), раздел "HTML Drag and Drop API".
Статья "Drag and Drop" на сайте learn.javascript.ru.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →