Угловая проблема с перетаскиванием - PullRequest
0 голосов
/ 18 октября 2018

У меня есть простой список из mat-card.Я хотел бы выделить mat-card при перетаскивании файла и что-то сделать с ним, но у меня есть две основные проблемы:

  • Иногда, если перетаскивать слишком быстро, статус mat-card не правильно обновлен.поэтому в некоторых случаях у меня выделяется несколько карт.
  • Событие e.preventDefault() on drop ничего не делает.Файл открыт в браузере, что не соответствует ожидаемому поведению.

Я пробовал так много вещей, даже вручную добавлял / удалял прослушиватели событий, но ничего не получалось.Надеюсь, что кто-то поможет:)

Здесь вы можете найти демонстрацию, сделанную в stackblitz, чтобы ее было легче отлаживать: https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted

Обновление: Использование Angular v5 и Angular Material 2

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

После некоторого возмущения необходимо предотвратить событие dragover, а также событие drop, чтобы не дать браузеру открыть файл.Чтобы исправить применение класса несколько раз, я исправил это, используя ngClass вместо ngIf, и, похоже, он работает более согласованно.Проверьте этот стек * блиц для демонстрации.

0 голосов
/ 18 октября 2018

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

Во втором случае добавьте прослушиватель хоста к событию window:dragover, чтобы предотвратитьпо умолчанию:

@HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
  event.preventDefault();
}

Stackblitz

...