simple drag and drop in angular ondrop, ondragover, ondragstart

Question

I am trying to make simple drag and drop methods in my component and I can't seem to get this working. This is really the first time I have ever dealt with drag and drop type stuff so not sure if I am taking the right approach. Just adopting a tutorial from W3. Any suggestions? The id would be to simply get the id of the element being dragged and the id of the element dropped and append...

template:

<div id="opened" class="board-body" (ondrop)="drop($event)" (ondragover)="allowDrop($event)">
    <div class="card bg-light-blue mb-2" id="drag1" draggable="true" (ondragstart)="drag($event)">
        draggable card 1
    </div>
</div>
<div id="responded" class="board-body" (ondrop)="drop($event)" (ondragover)="allowDrop($event)">
    <div class="card bg-light-blue mb-2" id="drag2" draggable="true" (ondragstart)="drag($event)">
        draggable card 2
    </div>
</div>

component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-funnel-grid',
  templateUrl: './funnel-grid.component.html',
  styleUrls: ['./funnel-grid.component.scss']
})
export class FunnelGridComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    allowDrop(e) {
        e.preventDefault();
    }

    drag(e) {
        e.dataTransfer.setData('text', e.target.id);
        console.log(e.target.id);
    }

    drop(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData('text');
        e.target.appendChild(document.getElementById(data));
    }

}

Answer 1

You just need to change the event names:

• (ondrop) to (drop)
• (ondragover) to (dragover)
• (ondragstart) to(dragstart)