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

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

1 个答案: