Dragenter срабатывает на другие элементы

153
25 января 2021, 22:30

Делаю drag and drop файла на чистом JS и возникла проблема с ивентом DragEnter. Мне нужно отловить Event , то что я начал перемещать файлы в окно браузера и показать зону , куда нужно закидывать эти файлы. Примером служит старый и добрый ВК. Но проблема в том что dragenter срабатывает и на обычный выделенный текст , если его начинать перемещать и показывается тоже самое окно.

Сам код

if (this.determineDragAndDropCapable()) { //Проверка на поддержку браузером
  var eventTarget = null;
  ['dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(event => {
    window.addEventListener(event, e => {
      e.preventDefault();
    });
  });
  window.addEventListener('dragenter', e => {
    eventTarget = e.target;
    this.dragAndDropFiles = true;
  });
  window.addEventListener('dragleave', e => {
    if (eventTarget == e.target) {
      this.dragAndDropFiles = false;
    }
  });
  this.$refs.dragAndDropZone.addEventListener('dragover', e => {
    e.dataTransfer.dropEffect = 'copy';
  });
  window.addEventListener('drop', e => {
    this.dragAndDropFiles = false;
    if (e.target == this.$refs.dragAndDropZone) {
      this.handleFileUpload(e.dataTransfer.files);
    }
  });
}

Ссылка на gif изображение для ясности ситуации: https://i.yapx.ru/EPrqN.gif

Подскажите, может можно как-нибудь отлавливать ,то что я переношу файлы и только тогда показывать зону для дропа файла? Или может стоит написать кастомный drag and drop? Но пока что не знаю , как я могу это сделать

Любая помощь :) Заранее спасибо!

Answer 1

Решение: 

var cancelDrag = false;
window.addEventListener('dragstart', e => {
  cancelDrag = true;
});
window.addEventListener('dragend', e => {
  cancelDrag = false;
});
window.addEventListener('dragenter', e => {
  if (cancelDrag) return false;
  eventTarget = e.target;
  this.dragAndDropFiles = true;
});
window.addEventListener('dragleave', e => {
  if (eventTarget == e.target) {
    this.dragAndDropFiles = false;
  }
});
this.$refs.dragAndDropZone.addEventListener('dragover', e => {
  e.dataTransfer.dropEffect = 'copy';
});
window.addEventListener('drop', e => {
  this.dragAndDropFiles = false;
  if (e.target == this.$refs.dragAndDropZone) {
    this.handleFileUpload(e.dataTransfer.files);
  }
});
READ ALSO
map not a function при выборе option в dropDown
javascript

map not a function при выборе option в dropDown

TypeError: serviceNamemap is not a function сам компонент рендерится, но при выборе опшина, ломается

 162
Что делают эти строки?
javascript

Что делают эти строки?

Помоготе разобраться что делают эти 7 строк что я закоментировалНе могу розобраться в длинных jQuery цепочках( Код слайдера:

 202
Как отобразить скачанное изображение vue js
javascript

Как отобразить скачанное изображение vue js

Сервер:

 156
Последовательность отправки AJAX
javascript

Последовательность отправки AJAX

Есть задача: С элементов страницы собираются данные (ID)Далее их, по очереди, надо отправить на сервер, но чётко последовательно(после завершения-следующий)

 143