Drag and drop — технология перетаскивания в интерфейсах¶
Drag and drop (от англ. «перетащи и брось», также «перетаскивание») — приём взаимодействия человека с компьютером, при котором объект на экране перемещается с помощью указывающего устройства (мышь, палец, стилус) из исходного положения в целевую область путём нажатия, удержания и последующего отпускания. Метод широко применяется в графических операционных системах, оконных интерфейсах, веб-приложениях и мобильных ОС.
¶Принцип работы
Классический сценарий drag and drop состоит из трёх фаз:
- Начало перетаскивания (drag start) — пользователь нажимает кнопку указывающего устройства на объекте и начинает движение. Система фиксирует объект как «перетаскиваемый».
- Перетаскивание (dragging) — объект следует за курсором. Подсвечиваются допустимые целевые зоны (drop targets), недопустимые могут отображаться с иным курсором.
- Сброс (drop) — пользователь отпускает кнопку. Если курсор находится над подходящей целевой зоной, выполняется действие: перемещение файла, вставка данных, сортировка элемента.
В графических ОС (Windows, macOS, Linux с X11/Wayland) перетаскивание реализовано на уровне оконной системы и доступно практически во всех файловых менеджерах: перенос файлов между папками, копирование с зажатой клавишей Ctrl, создание ярлыков.
¶История
Идея непосредственного манипулирования объектами на экране была впервые реализована в системе Alto, разработанной в Xerox PARC в начале 1970-х годов. Практическое распространение drag and drop получил с появлением Apple Lisa (1983) и Macintosh (1984), где перетаскивание файлов в корзину стало центральным элементом метафоры «рабочий стол». В Windows технология массово вошла в обиход с Windows 95, закрепив перенос файлов через Проводник.
¶Реализация в вебе
В HTML5 стандарт drag and drop определён в спецификации W3C. Основные элементы API:
- атрибут
draggable="true"делает элемент перетаскиваемым; - события
dragstart,drag,dragend— на перетаскиваемом объекте; - события
dragenter,dragover,dragleave,drop— на целевой зоне; - механизм
dataTransfer— передача данных между источником и целью (текст, URL, файлы).
Загрузка файлов на сервер через drag and drop реализуется через объект FileList, получаемый из dataTransfer.files. Популярные библиотеки (Sortable.js, React DnD, interact.js) добавляют плавную анимацию, сортировку списков и поддержку сенсорных экранов.
¶Мобильные устройства
На сенсорных экранах drag and drop реализован средствами жестов: долгое нажатие с последующим перетаскиванием пальцем. В iOS перетаскивание между приложениями поддерживается с iOS 11 (многозадачность на iPad), в Android — с Android 10 (функция Drag and Drop). Ограничением сенсорного взаимодействия является «пальцевая заслонка» — объект закрыт перемещающимся пальцем, что требует смещения визуального курсора относительно точки касания.
¶Применение
- Файловые менеджеры — перемещение, копирование, удаление файлов.
- Графические редакторы — Photoshop, GIMP, Figma: перенос слоёв, объектов, изображений.
- Среды разработки — перетаскивание файлов в проект, рефакторинг через drag элементов кода.
- Веб-приложения — Trello, Kanban-доски, конструкторы страниц (Wix, Tilda), онлайн-редакторы.
- Таблицы и базы данных — сортировка строк, перенос ячеек в Excel и Google Таблицах.
¶Доступность
Drag and drop создаёт проблемы для пользователей с моторными нарушениями и для тех, кто использует клавиатуру. Рекомендации WCAG требуют наличия альтернативного способа выполнения того же действия — например, перемещения элемента через контекстное меню или клавиатурные команды (стрелки с модификатором). Многие реализации drag and drop не удовлетворяют этим требованиям.
¶Недостатки
Основные замечания к технологии: сложность освоения новичками (неочевидность, что объект можно перетаскивать), конфликт со стандартным выделением текста и прокруткой страницы, ограниченность на устройствах без точного указателя, а также высокая стоимость корректной реализации с учётом доступности и сенсорных сценариев.
¶Источники
- HTML Living Standard — Living Standard. WHATWG
- W3C HTML5 Drag and Drop API Specification
- J. Nielsen. Usability Engineering. Morgan Kaufmann, 1993
- A. Dix, J. Finlay, G. Abowd, R. Beale. Human-Computer Interaction. Pearson, 2003
- Apple Human Interface Guidelines
- Microsoft Windows User Experience Interaction Guidelines