Drag & Drop può sembrare spaventoso per alcuni sviluppatori. In realtà, l'API HTML Drag & Drop integrata è piuttosto semplice.

Vediamo come possiamo creare facilmente una tabella ordinabile utilizzando l'API HTML angolare e trascina e rilascia.

In questo articolo, assumeremo che tu abbia già familiarità con Angular 2+.

Inizieremo creando un'app Angular vuota usando il seguente comando:ng new angular-sortable-table

Non vogliamo dedicare troppo tempo al CSS qui, quindi aggiungiamo CDN bootstrap nel nostro index.htmlfile:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>

Vogliamo visualizzare un semplice elenco di nomi di frutta. Il nostro primo passo sarà aggiungere gli articoli al nostro app.components.tsfile:

public items: Array<string> = ['Apple', 'Banana', 'Orange', 'Peach', 'Kiwi'];

<section class="container">
  <table class="table table-striped">
    <thead>
    <tr>
      <th class="text-center"><b>Fruits</b></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of items">
      <td>{{item}}</td>
    </tr>
    </tbody>
  </table>
</section>

2. Aggiunta della nostra funzione di trascinamento della selezione

Aggiungeremo draggable="true"al nostro <tr>per attivare l'API trascinabile.

Per impostazione predefinita, l'evento onDragOver impedisce di rilasciare qualsiasi cosa su altri elementi. È necessario impedire che questo evento sia in grado di gestire gli eventi di rilascio. Aggiungiamo un metodo per questo al nostro app.component.ts:

allowDrop($event): void {
   $event.preventDefault();
}

...
<tr *ngFor="let item of items"
    draggable="true"
    (dragover)="allowDrop($event)"
>
  <td>{{item}}</td>
</tr>
...

⚠️ Se stai usando Safari potresti pensare che non funzioni perché Safari non mostra l'elemento in movimento. Prova un altro navigatore per una migliore sensazione di quello che stai facendo

3. Definito il comportamento atteso

L'obiettivo qui sarà spostare l'elemento selezionato in una nuova posizione, sotto l'elemento su cui lo lasceremo cadere.

Innanzitutto, dovremo ricordare l'indice dell'elemento selezionato. Lo faremo nell'evento onDragStart.

Aggiungi questo al tuo app.component.ts:

private draggedIndex: number;
onDragStart(index): void {
  this.draggedIndex = index;
}

onDrop($event, index): void {
  $event.preventDefault();
  const item = this.items[this.draggedIndex];
  this.items.splice(this.draggedIndex, 1);
  this.items.splice(index, 0, item);
  this.draggedIndex = -1;
}

...
<tr *ngFor="let item of items; let i = index"
    draggable="true"
    (dragover)="allowDrop($event)"
    (dragstart)="onDragStart(i)"
    (drop)="onDrop($event, i)"
>
  <td>{{item}}</td>
</tr>
...

Come puoi vedere, questo è sufficiente per farlo funzionare, hai una tabella ordinabile.

4. Rendilo un po' più amichevole

A seconda delle tue esigenze, puoi fare molto da qui. Useremo un semplice esempio per dimostrare come puoi personalizzarlo ulteriormente.

Aggiungeremo un cursore di trascinamento e visualizzeremo una barra blu che indica dove verrà rilasciato il nostro oggetto.

Per fare ciò, ricorderemo su quale elemento viene trascinato, gli assegneremo una classe "attiva" e la useremo per visualizzare la barra blu.

Aggiorna il metodo allowDrop nel tuo app.component.tsfile in questo modo:

public draggedOverIndex: number;

allowDrop($event, index): void {
  this.draggedOverIndex = index;
  $event.preventDefault();
}

onDrop($event, index): void {
  $event.preventDefault();
  const item = this.items[this.draggedIndex];
  this.items.splice(this.draggedIndex, 1);
  this.items.splice(index, 0, item);
  this.draggedIndex = -1;
  this.draggedOverIndex = -1;
}

...
class="draggable"
[class.active]="draggedOverIndex == i"
...

tr.draggable {
  cursor: grab;
  &.active {
    border-bottom: 2px solid blue;
  }
}

Spero che questo articolo ti sia piaciuto! Il codice completo può essere trovato nel repository github qui o sotto.

Se vuoi vedere altri articoli come questo, fammelo sapere applaudendo, commentando o seguendo ☺️

Codice completo:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public items: Array<string> = ['Apple', 'Banana', 'Orange', 'Peach', 'Kiwi'];
  private draggedIndex: number;
  public draggedOverIndex: number;

  allowDrop($event, index): void {
    this.draggedOverIndex = index;
    $event.preventDefault();
  }

  onDragStart(index): void {
    this.draggedIndex = index;
  }

  onDrop($event, index): void {
    $event.preventDefault();
    const item = this.items[this.draggedIndex];
    this.items.splice(this.draggedIndex, 1);
    this.items.splice(index, 0, item);
    this.draggedIndex = -1;
    this.draggedOverIndex = -1;
  }
}

<section class="container">
  <table class="table table-striped">
    <thead>
    <tr>
      <th class="text-center"><b>Fruits</b></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of items; let i = index"
        class="draggable"
        [class.active]="draggedOverIndex == i"
        draggable="true"
        (dragover)="allowDrop($event, i)"
        (dragstart)="onDragStart(i)"
        (drop)="onDrop($event, i)"
    >
      <td>{{item}}</td>
    </tr>
    </tbody>
  </table>
</section>

tr.draggable {
  cursor: grab;
  &.active {
    border-bottom: 2px solid blue;
  }
}