I have a website with a draggable table where users can drag and drop items to rearrange them.
Although it works perfectly on Chrome and Firefox, I'm having trouble getting it to function properly on Edge.
When debugging on Edge, all properties of the event object show errors.
Below is the code snippet:
TypeScript
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)">