Как перестать перенаправлять после события `drop`?

Question

После добавления файла в div в Firefox, веб-страница будет перенаправлена ​​на этот файл.Я попытался остановить это распространение с помощью jQuery e.preventDefault() в обработчике drop, но потерпел неудачу.

Смотрите эту демонстрацию , перетаскивание файла в #test не будет перенаправлять веб-страницуно если заглянуть в #test1, я хочу знать почему.Должен ли я всегда привязывать обработчики к dragenter, dragover, dragleave и drop, чтобы предотвратить распространение после drop?

update:

Я нашел несколько советов по html5doctor :

Чтобы сообщить браузеру, что мы можем добавить этот элемент, все, что нам нужно сделать, - отменить событие dragover.Однако, поскольку IE ведет себя по-разному, нам нужно сделать то же самое для события dragenter.

А Mozilla утверждает :

Слушатель длясобытия dragenter и dragover используются для указания допустимых целей перетаскивания, то есть мест, где перетаскиваемые элементы могут быть сброшены.

Но я проверяю эту демонстрацию на firefox, #test работает, а #test1 нет, кажется, что Mozilla допустила ошибку, и html5doctor прав: Firefox требуется dragover только для того, чтобы drop заработал.

Answer 1

Событие ondragover необходимо отменить в Google Chrome и Safari , чтобы разрешить запуск события ondrop.

Answer 2

Я заметил, что было недостаточно просто отменить onDragOver, но мне также пришлось отменить onDragDrop и onDragLeave. Ниже я показываю логирование, показывающее, как ведет себя пользователь:

<script type="text/javascript">

    var handledragleave = function handleDragLeave(e) {
            console.log("Floating away.  Do code here when float away happens.");
            return this.cancelDefaultBehavior(e);
    }

    var handledragdrop = function handleDrop(e) {
            console.log("Dropping.  Do code here when drop happens.");
            return this.cancelDefaultBehavior(e);
    }

    var handledragover = function handleDragOver(e) {
            console.log("Floating over.  Do code here when float over happens.");
            return this.cancelDefaultBehavior(e);
    }

    cancelDefaultBehavior(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
    }

$('.your-element-being-dragged-to')
    .on('DragLeave', handledragleave)
    .on('DragDrop', handledragdrop)
    .on('DragOver', handledragover);

</script>

А потом твоя стихия ...

<p class="your-element-being-dragged-to">Drag something here!</p>