События dragover и drop

Цель сброса должна обрабатывать и dragover, чтобы разрешить сброс, и drop, чтобы принять его. Без события dragover браузер отказывается инициировать сброс, поскольку стандартное поведение — считать, что ни один элемент не является целью сброса.

В обработчике события перетаскивания над целью необходимо вызвать e.preventDefault(). Это отменяет стандартное поведение браузера, отклоняющее сброс. Без этого курсор остаётся в состоянии «не разрешено», а событие сброса не возникает, что бы ни делал пользователь.

Событие входа при перетаскивании возникает один раз, когда курсор входит в цель, а событие выхода — один раз, когда он её покидает. Используйте их для переключения визуальной подсветки «перетаскивание над целью»: добавляйте класс при входе и удаляйте при выходе, чтобы пользователь видел область, которая примет сбрасываемый объект.

Есть важная особенность: при перемещении курсора над дочерним элементом родитель сначала получает событие выхода, а затем дочерний элемент — событие входа. Используйте counter, увеличивая его при входе и уменьшая при выходе, и удаляйте подсветку только после того, как counter вернётся к нулю.

Внутри обработчика перетаскивания над целью установите e.dataTransfer.dropEffect = "move" (или «копирование», «ссылка», «ничего»), чтобы управлять курсором и сообщить источнику, что произойдёт. Операция должна быть совместима с effectAllowed источника, иначе сброс будет отклонён.

В обработчике сброса вызовите e.dataTransfer.getData(format) с тем же типом MIME, который использовался в setData (обычно «текст без форматирования»). Затем найдите элемент по идентификатору, добавьте его в цель, обновите модель данных или выполните любое другое действие, необходимое приложению.

В обработчике сброса также необходимо вызвать e.preventDefault(). Без этого браузер возвращается к стандартному поведению — для сброшенного адреса это означает переход по ссылке, который немедленно уничтожает состояние страницы.

Браузер преобразует файлы, перетащенные из OS, в событие сброса, в котором заполнено свойство e.dataTransfer.files. Переберите FileList и прочитайте каждый файл с помощью API файлов, чтобы поддерживать загрузку изображений, просмотрщики файлов журналов или импорт документов.

setData может сохранять одни и те же данные под несколькими типами MIME: «текст без форматирования» для запасного варианта, «список URI» для адресов и «структурированные данные» для данных в формате JSON. Цель сброса выбирает наиболее подходящий тип, который она понимает, с помощью getData.

Мобильные браузеры не создают события перетаскивания над целью и сброса на основе касаний. Для единого взаимодействия используйте события указателя с ручным определением попадания или библиотеку, скрывающую различия. Встроенное перетаскивание HTML5 лучше считать предназначенным только для настольных устройств.

Событие перетаскивания над целью возникает непрерывно при движении курсора — часто десятки раз в секунду. Не усложняйте обработчик: избегайте дорогих запросов к DOM и чтения данных о компоновке внутри него. Кэшируйте прямоугольники при входе курсора и используйте их повторно, пока курсор находится над целью.

Рабочая цель сброса обрабатывает перетаскивание над целью (всегда вызывает preventDefault и при необходимости устанавливает dropEffect) и сброс (снова вызывает preventDefault, затем читает данные через dataTransfer.getData или dataTransfer.files). Используйте вход и выход при перетаскивании вместе с counter для подсветки и не усложняйте обработчики, поскольку событие перетаскивания над целью возникает очень часто.