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

您只需要更改事件名称：

（放下）到（放下）
（ondragover）到（dragover）
（ondragstart）至（dragstart）

Answer 2

您是否考虑过使用图书馆来完成拖放操作？像https://www.npmjs.com/package/ng-drag-drop

这样的东西

简单的拖放角度ondrop，ondragover，ondragstart

2 个答案: