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

Question

I have used the following html and ts for drag and drop list items from one div to another 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>

And Typescript contains the following:

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

Its from Html5 drag and drop, and i am able to drag and drop the list items from the div with class listArea to the div with class buildArea.

After dropped the list items user may change the order of the list items that was dropped in buildArea div.

For eg, the given order I am list 1,2,3,4,5 may change to any order like 2,4,5,3,1 or anything user wants.

As of now i have used only angular and typescript and no third party plugin was added and i am also need the result without any third party or jquery.

I have also have look around for this but unable to get a correct solution and hence kindly help me to achieve the change of order in dropped list.

The stackblitz link was, https://stackblitz.com/edit/angular-wyimor

Answer 1

In your drop area, bind list items to an array.

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

In component class:

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

Define an interface for target item:

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