1

Вопрос явно глупый, но я не могу найти рабочего варианта четвертый час. Мне нужно, чтобы фотографии можно было перетягивать на элементы типа 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 и другие) Желаемый результат был достигнут здесь, однако всё-ещё не работает у меня

2
  • А эмдиэн почитать? "If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled, and no drop event is fired.". Если и по написанному не получается, то нужно добавить в вопрос минимальный воспроизводимый пример.
    – yar85
    Commented 2 июл. 2021 в 18:36
  • funcion onDragenEnter() { e.preventDefault(); /*...*/ } — синтаксическая ошибка + e undefined. Оно по определению не сможет работать. И обрати свое внимание на последнее предложение предыдущего комментария.
    – yar85
    Commented 2 июл. 2021 в 18:44

1 ответ 1

0

Для того, чтобы Ивент ondrop сработал обязательно требуются ивенты dragenter и dragover с event.preventDefault и event.stopPropogation()

Я все-ещё не понимаю, как именно это работает, однако спасибо комментарию от @yar85, он помог.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.