如何使用Angular 2实现拖放和交换？

Question

我有多个div，我需要实现拖放，交换功能，意味着我有两个div div1和div2。因此，当用户拖动div1并在div2上删除div1时，它应该交换两个div的位置。

<div class="flex-container" *ngFor="let rowdata of rowno;let i = index" >
<div *ngFor="let columndata of colno;let j = index">
    <div id={{loadData(this.finalsequence)}} draggable="true" (drop)="drop($event)" (dragover)="allowDrop($event)" (dragstart)="drag($event)">
        <div style="position: relative;" attr.>test</div>
        <div>{{(i* colno.length) + (j + 1)}}</div>
        <div>{{this.dict.get((i* colno.length) + (j + 1))}}</div>
    </div>
</div>

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

drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}