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

Posted 2021-04-20

我已经使用以下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的拖放，我可以将列表项与div类中的列表拖放到带有类buildArea的div中。

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

例如，我列表1,2,3,4,5的给定订单可能会更改为2,4,5,3,1或任何用户想要的任何订单。

截至目前我只使用了角度和打字稿，并没有添加第三方插件，我也需要没有任何第三方或jquery的结果。

我也一直在寻找这个，但无法得到正确的解决方案，因此请帮助我实现删除列表中的顺序更改。

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

答案

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

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