使用拖放更改列表项的顺序

Question

我使用以下 html 和 ts 将列表项从一个 div 拖放到另一个 div。

HTML：

<div class="listArea">
   <h4> Drag and Drop list in Green Area: </h4>
   <ul class="unstyle">
      <li id="drag1" draggable="true" (dragstart)="drag($event)">
          i am list 1
      </li>
      <li id="drag2" draggable="true" (dragstart)="drag($event)">
          i am list 2 
      </li>
      <li id="drag3" draggable="true" (dragstart)="drag($event)">
          i am list 3
      </li>
      <li id="drag4" 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>

Typescript 包含以下内容：

  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));
  }

它来自 Html5 拖放，我可以将列表项从具有类 listArea 的 div 拖放到具有类 buildArea 的 div。

删除列表项后，用户可以更改在 buildArea div 中删除的列表项的顺序。

例如，我是列表 1、2、3、4、5 的给定顺序可能会更改为 2、4、5、3、1 之类的任何顺序或用户想要的任何顺序。

到目前为止，我只使用了 angular 和 typescript，没有添加任何第三方插件，我还需要 没有任何第三方或 jquery 的结果。

我也四处寻找，但无法获得正确的解决方案，因此请帮助我实现删除列表中的顺序更改。

stackblitz 链接是 https://stackblitz.com/edit/angular-wyimor

Answer 1

在您的放置区域中，将列表项绑定到一个数组。

<div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)">
    <h4> Drop Here </h4>
    <ul>
        <li *ngFor="let item of targetItems [id]="item.id">{{item.text}}</li>
    </ul>
</div>

在组件类中：

targetItems: Array<TargetItem> = [];
....
drop(ev) {
    ev.preventDefault();
    let id = ev.dataTransfer.getData("text");
    let text = document.getElementById(id).innerText;
    this.targetItems.push({id: id, text: text});
    this.targetItems.sort((a, b) => {
        // Implement your own sorting logic
        // e.g., return a.id - b.id;
    });
}

为目标项目定义一个接口：

interface TargetItem {
    text: string;
    id: number;
}