Изменить порядок элементов списка с помощью перетаскивания

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 drag and drop, и я могу перетаскивать элементы списка из div с помощью класса listArea в div с классом buildArea.

После удаления элементов списка пользователь может изменить порядок элементов списка, которые были удалены в buildArea div.

Например, данный порядок в списке 1, 2, 3, 4, 5 может меняться на любой порядок, например, 2,4, 5, 3, 1 или на что угодно.

На данный момент я использовал только angular и машинописный текст, и никакой сторонний плагин не был добавлен, и мне также нужен результат без каких-либо сторонних или 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;
}