Почему не работает preventDefault для события drop?

Question

[Никита Соколов]

Работаю на Angular 7 и столкнулся с такой проблемой - не могу реализовать drag n drop. preventDefault не срабатывает и файл просто открывается в браузере.
Вообщем разметка в компоненте такая:

<div id="drop-area" (dragover)="preventDefaults($event)" (drop)="handleDrop($event)" (ngClass)="highlight">
...
</div>

И сам обработчик события drop:

preventDefaults(e){

    e.preventDefault();
    e.stopPropagation();

}

handleDrop(e){

    preventDefaults(e);
    console.log(e.dataTransfer.files);

}

Answer 1

[hzzzzl]

e.preventDefault() надо не только на событие drop, но и на dragover

https://stackoverflow.com/questions/8414154/html5-...

Comments

[Никита Соколов]

я уже пытался добавлять драговеру prevent default, но ничего не получалось. Впринципе сейчас так же. Может я что-то не так написал?

<div id="drop-area" (dragover)="preventDefaults($event)" (drop)="handleDrop($event)" (ngClass)="highlight">
...
</div>

preventDefaults(e){

    e.preventDefault();
    e.stopPropagation();

  }

  handleDrop(e){

    preventDefaults(e);
    alert(e.originalEvent.dataTransfer.files);

  }

[hzzzzl]

wb_by, ангуляр не умею, но вообще всё работает
https://codepen.io/anon/pen/xNamXY

[Никита Соколов]

hzzzzl, Все правильно про драговер, просто я забыл this перед методом preventDefaults

Answer 2

[0xD34F]

Вызов метода компонента из другого метода (в отличие от шаблона) требует явного обращения к экземпляру компонента - вы забыли this перед preventDefaults в методе handleDrop.

Comments

[Никита Соколов]

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

[0xD34F]

С "не могу в консоли ошибки посмотреть" разбирайтесь где-нибудь в другом месте. Ваш вопрос вроде бы про другое.

Ответ обновил.

[Никита Соколов]

0xD34F, А вот и решение) Спасибо большое за ответ!