Кроме установки атрибута и обработчика необходимо сохранить данные, которые мы перетягиваем в объекте dataTransfer. Доступ к нему можно получить через объект event, который передаётся в первом параметре обработчика. Для сохранения данных используется метод setData, в первом параметре которого нужно указать формат данных, а во втором – сами данные. К сожалению, как показала практика, разные браузеры поддерживают разные форматы. В стандарте речь идет только о двух: text/plain и text/uri-list. Firefox поддерживает шесть. В общем, чтобы пример нормально работал и в Firefox и в Chrome, я остановился на text/plain. Теперь нужно подготовить контейнер к приёму объектов. Для этого необходимо назначить ему обработчики событий dragenter, dragleave, dragover и drop. Причём первые три должны возвращать false, чтобы заблокировать стандартное поведение браузера. В результате у меня получился следующий код.
Понравилась статья? Получай обновления и будь всегда в курсе событий!