it-roy-ru.com

Событие отбрасывания HTML5 не работает, если не обработан dragover

Я слушаю событие drop и выполняю функцию e.preventDefault(), но пытаюсь открыть удаленный файл. До вчерашнего дня все работало нормально. Но только сегодня это сломалось по неизвестной причине. Я сделал JsFiddle#bwquR/10 чтобы отразить то же самое.

Правка:

Похоже, что если вы не принимаете событие dragover, drop не может быть обработано. даже в скрипке Если вы прокомментируете dragover, он не будет работать.
В реальной работе я пропустил написание dragover, но все же вопрос drop не будет работать без dragover

Скрипка на самом деле работала, но тело было таким маленьким (только текст DROP там). Событие drop происходило только в той небольшой области, где текст DROP лежит не на всем теле. Поэтому я подумал, что это не работает. извините за путаницу.

27
Neel Basu

Я полагаю, это потому, что без обработчика события dragOver используется обработчик события по умолчанию для события dragOver, поэтому после этого событие сброса не вызывается. Существует необходимость в e.preventDefault для события dragOver перед событием drop.

35
zuo

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Если вы хотите разрешить удаление, вы должны предотвратить обработку по умолчанию, отменив событие. Вы можете сделать это, либо возвратив false из определяемого атрибутом прослушивателя событий, либо вызвав метод event.preventDefault события. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Вызов метода protectDefault во время события dragenter и dragover укажет, что в этом месте разрешено удаление. Тем не менее, вы обычно хотите вызывать метод protectDefault только в определенных ситуациях, например, только в случае перетаскивания ссылки. Для этого вызовите функцию, которая проверяет условие и отменяет событие только при выполнении условия. Если условие не выполнено, не отменяйте событие, и там не произойдет сброс, если пользователь отпустит кнопку мыши.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);
4
Mike Lee

Я не уверен, правильно ли я понимаю вашу проблему, но если вы хотите прочитать пропущенные файлы, вам нужно обработать событие dragover и поместить по крайней мере следующую строку кода:

evt.dataTransfer.dropEffect = 'copy';

в противном случае dropEffect по умолчанию равно нулю, и вы не получите никаких данных.

3
mnowotka

У меня отлично работает. Вы загружаете это как HTTP или ФАЙЛ URL? Я считаю, что это должен быть HTTP-URL с Chrome.

1
Maurice