使用拖放将项目放在列表之间

Question

我正在使用没有任何库的纯角度和打字稿制作拖放功能。

HTML：

<div class="listArea">
    <h4> Drag and Drop list in Green Area: </h4>
    <ul class="unstyle">
        <li id="1" draggable="true" (dragstart)="drag($event)">
            i am list 1
        </li>
        <li id="2" draggable="true" (dragstart)="drag($event)">
            i am list 2
        </li>
        <li id="3" draggable="true" (dragstart)="drag($event)">
            i am list 3
        </li>
        <li id="4" draggable="true" (dragstart)="drag($event)">
            i am list 4
        </li>
    </ul>
</div>
<div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)">
    <h4> Drop Here </h4>
</div>

TS：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  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).cloneNode(true));
  }
}

正在工作 Stackblitz： https://stackblitz.com/edit/angular-wyimor

在上面给出的示例中，我可以将列表项从一个div拖放到另一个div。

我曾经用过，

ev.target.appendChild(document.getElementById(data).cloneNode(true));

因此它被追加到先前删除的最后一个。 但是我需要将列表项放在用户需要的任何地方。

例如，如果用户拖放列表顺序为

I am list 1
I am list 2
I am list 4
I am list 5

用户现在将列表I am list 3拖到哪里，需要放在I am list 2和I am list 4之间。

放置的项目应该是一个单独的列表，不要附加到li中。

请帮助实现将拖放列表项放置在用户想要的任何位置的拖放列表项之间。