Не удается предотвратить Dеfault () при событии сброса в div с Svelte - PullRequest
Новая
       14

Не удается предотвратить Dеfault () при событии сброса в div с Svelte

1 голос
/ 22 июня 2019

Я пытаюсь реализовать пипетку на <div> как компонент Svelte. Я пробовал каждую комбинацию preventDefault, но браузер по-прежнему загружает удаленный файл, а не передает его компоненту. 

<script>
    function handleDrop(event) {
        event.preventDefault();
        console.log("onDrop");
    }

    function handleDragover(event) {
        console.log("dragOver");
    }
</script>

<style>
    .dropzone {
        display: block;
        width: 100vw;
        height: 300px;
        background-color: #555;
    }
</style>

<div class="dropzone" on:drop|preventDefault={handleDrop} 
    on:dragover|once|preventDefault={handleDragover}></div>

Я пробовал с и без event.preventDefault(); в функциях обработчика. Также пробовал с событием on:dragenter и различными комбинациями модификаторов, то есть с stopPropagation. Браузер по-прежнему открывает удаленный файл. Что я делаю неправильно? Спасибо!

(ОБНОВЛЕНИЕ) ИСПРАВЛЕНИЕ: Хорошо, виновником был модификатор |once. После удаления из on:dragover в <div> все работает отлично, за исключением того, что событие dragover происходит непрерывно при перетаскивании через div. event.preventDefault(); внутри функций обработчика не требуется, так как модификатор |preventDefault работает правильно. Вот код (для краткости пропущен <style>): 

<script>
    function handleDrop(event) {
        console.log("onDrop");
    }
    function handleDragover(event) {
        console.log("onDragOver");
    }
</script>

<div class="dropzone" on:drop|preventDefault={handleDrop} 
    on:dragover|preventDefault={handleDragover}></div>

Пока не отправляю это как ответ, потому что я хотел бы выяснить, почему я не могу использовать модификатор |once для события dragover, что было бы полезно для моего приложения. Спасибо!

Ответы [ 2 ]

2 голосов
/ 30 июня 2019

Проблема:

Это обычная ошибка, основанная на перетаскивании HTML (не по вине Svelte), где последнее событие dragover должно быть отменено для отмены drop. Если посмотреть на директиву Svelte Once , то это просто замыкание, которое запускает ваш обработчик один раз. Тем не менее, драговер будет срабатывать несколько раз, прежде чем его уронят, поэтому непосредственно предшествующий драговер не предотвращается.

Решение:

Просто включите директиву без обработчика: 

<div 
   on:dragover|preventDefault
   on:drop|preventDefault={handler} 
>
0 голосов
/ 22 июня 2019 
<style>
    .dropzone {
        display: block;
        width: 100vw;
        height: 300px;
        background-color: #555;
    }
</style>

<div class="dropzone" on:drop={event => handleDrop(event)}
    on:dragover={handleDragover}>
</div>

<script>
    export function handleDragover (ev) {
        ev.preventDefault();
        console.log("dragOver");
    }

    export function handleDrop (ev) {
        ev.preventDefault();
        console.log("onDrop");
    }
</script>

Смотрите здесь: https://svelte.dev/repl/3721cbc9490a4c51b07068944a36a40d?version=3.4.2

https://v2.svelte.dev/repl?version=2.9.10&gist=8a9b145a738530b20d0c3ba138512289

...