Как сделать div элемент зоной для загрузки файлов
Вопрос явно глупый, но я не могу найти рабочего варианта четвертый час.
Мне нужно, чтобы фотографии можно было перетягивать на элементы типа image, которые представляют собой папку. Никакие обёртки типа form input не использую.
Надеялся найти какие-нибудь атрибуты позволящие взаимодействовать с drag-n-drop, но ничего подобного, похоже, нет.
Единственное, что нашёл: установка события ondrop
Define the drop zone: The target element of the drop event needs an ondrop global event handler. The following code snippet shows how this is done with a element:
— не сработало.
block.ondrop = function (){
e.preventDefault();
alert("Сброшено!"); // Не запускается
}
Другое событие dragenterсрабатывает нормально.
block.ondragenter = () => onDragenEnter();
Следующий код также не даёт возможности перетаскивать файлы в нужную область:
funcion onDragenEnter(){
e.preventDefault();
e.dataTransfer.setData("text/plain", e.target.id);
e.dataTransfer.dropEffect = "copy";
e.dataTransfer.effectAllowed = "copy";
}
В общем. Как я могу реализовать функцию drop внутрь обычного элемента? (не используя вышеупомянутые imput, form и другие)
Желаемый результат был достигнут здесь, однако всё-ещё не работает у меня
Ответы (1 шт):
Для того, чтобы Ивент ondrop сработал обязательно требуются ивенты dragenter и dragover с event.preventDefault и event.stopPropogation()
Я все-ещё не понимаю, как именно это работает, однако спасибо комментарию от @yar85, он помог.