angular - 简单的拖放 Angular ondrop、ondragover、ondragstart

Question

我正在尝试在我的组件中创建简单的拖放方法，但似乎无法正常工作。这真的是我第一次处理拖放类型的东西，所以不确定我是否采取了正确的方法。刚刚采用了 W3 的教程。有什么建议？ id 将是简单地获取被拖动元素的 id 和删除并附加元素的 id ......

模板:

<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>

成分:

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

您只需要更改事件名称:

(ondrop) 到 (drop)

(ondragover) 到 (dragover)

(ondragstart) to(dragstart)