Событие drop неправильно передается на Edge

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

В Chrome и Firefox это работает безупречно, но по какой-то причине я не могу заставить его работать в Edge.

Когда я отлаживаю на Edge, все свойства переданного объекта события являются ошибками.

Событие drop неправильно передается на Edge

Вот мой код:

Машинопись

dragEnd(event) {
event.target.style.opacity = '1';
}

drag(event, questionId: number) {
event.dataTransfer.setData('questionId', questionId);
const element: HTMLTableRowElement = event.target;
element.style.opacity = '0.4';
}

allowDrop(ev) {
ev.dataTransfer.dropEffect = 'move';
ev.preventDefault();
}

drop(event, themeId: number) {
const target = event.target.parentElement;
this.moveRow(Number(event.dataTransfer.getData('questionId')), this.stripCharacters(target.id));
this.updateSaveOrderButton(themeId);
}

 moveRow(source: number, target: number) {
let questions: Question[] = this.evaluation.themes.find
  (t => t.id === this.getQuestionById(source).theme_id).questions;

const sourceIndex: number = questions.findIndex(q => q.evaluation_question_id === source);
const targetIndex: number = questions.findIndex(q => q.evaluation_question_id === target);

if (questions.find(q => q.evaluation_question_id === target) && sourceIndex !== targetIndex)
  questions = this.arrayMove(questions, sourceIndex, targetIndex);

}}

HTML

 <tr [id] = "'questionrow' + question.evaluation_question_id" *ngFor = "let question of theme.questions; let index = index"
                class = "draggable" draggable = "true" (dragend) = "dragEnd($event)" (drop) = "drop($event, theme.id)"
                (dragstart) = "drag($event, question.evaluation_question_id)" (dragover) = "allowDrop($event)">

Вы видели ошибку в консоли? Если возможно, вы можете опубликовать пример jsfiddle. так что мы можем напрямую провести тест с Edge, чтобы выявить проблему.

Deepak-MSFT 01.11.2018 08:51

Первые два пока начали тащить. Последние два относятся к функции, которая получает неверные параметры из-за первых двух ошибок. ОШИБКА Ошибка: недопустимый аргумент. ОШИБКА КОНТЕКСТ [объект-объект] ОШИБКА TypeError: невозможно получить свойство 'template_questions' неопределенной или нулевой ссылки. КОНТЕКСТ ОШИБКИ [объект-объект]

Jari S 02.11.2018 11:46
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
198
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел ответ.

Очевидно, Edge немного строже в отношении типов, чем другие браузеры. У методов перетаскивания должны быть параметры события типа DragEvent.

Не могли бы вы привести пример?

homerjam 18.11.2019 17:05

Другие вопросы по теме