Options de glisser-déposer

Du JavaScript simple ou une bibliothèque peut vous permettre d’ajouter facilement des fonctionnalités de glisser-déposer dans votre application Angular.

L’intégration de fonctionnalités de glisser-déposer dans nos applications Web Angular est facile avec du JavaScript simple ou une bibliothèque. Voyons comment dans cet article !

Ajoutez du glisser-déposer avec du JavaScript simple

Nous pouvons facilement ajouter le glisser-déposer à nos applications angulaires avec du JavaScript simple. Pour ce faire, nous écoutons les événements glisser-déposer natifs.

Par exemple, nous écrivons :

app.component.ts

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

interface Draggable {
  id: number;
  name: string;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  dragList: Draggable[] = [
    { id: 1, name: "foo" },
    { id: 2, name: "bar" },
    { id: 3, name: "baz" },
    { id: 4, name: "qux" },
    { id: 5, name: "abc" },
  ];
  dropList: Draggable[] = [];

  onDragStart(event: DragEvent, draggedObject: Draggable) {
    const index = this.dragList.findIndex((l) => l.id === draggedObject.id);
    event?.dataTransfer?.setData("text", index.toString());
  }

  onDragOver(event: DragEvent) {
    event.preventDefault();
  }

  onDrop(event: DragEvent) {
    const indexOfItemBeingDragged = Number(
      event?.dataTransfer?.getData("text")
    );
    if (typeof indexOfItemBeingDragged !== "number") {
      return;
    }
    const draggedObject = this.dragList[indexOfItemBeingDragged];
    this.dragList.splice(indexOfItemBeingDragged, 1);
    this.dropList.push(draggedObject);
    event?.dataTransfer?.clearData?.();
  }
}

Nous faisons des tableaux avec le dragList et dropList pour le contenu glisser-déposer. Ensuite, nous écoutons le dragstart, dragover et drop événements avec les méthodes répertoriées.

onDragStart sera appelé lorsque nous commencerons à faire glisser un élément avec le draggable attribut défini sur true.

Nous appelons event.dataTransfer.setData pour ajouter des données pour l’élément que nous faisons glisser. Puis dans onDragOver nous appelons event.preventDefault afin que nous puissions déposer des objets.

Et puis dans onDropnous obtenons la valeur que nous y mettons setDatale deuxième argument de avec getData et la même chaîne de format dans laquelle nous sommes passés setData.

Depuis que nous avons passé l’index de l’élément dans dragList nous nous entraînons setDatanous pouvons l’obtenir de getData et utilisez-le pour supprimer l’élément de dragList avec splice et mettez l’article dedans dropList.

Et puis nous appelons clearData pour effacer les données de transfert de données que nous avons saisies avec setData.

Dans app.component.htmlnous ajoutons:

<h1>Drag List</h1>
<div>
  <div
    *ngFor="let d of dragList"
    draggable="true"
    (dragstart)="onDragStart($event, d)"
  >
    {{ d.name }}
  </div>
</div>

<h1>Drop List</h1>
<div
  (dragover)="onDragOver($event)"
  (drop)="onDrop($event)"
  style="
    border: 1px orangered solid;
    border-radius: 5px;
    padding: 15px;
    min-height: 300px;
  "
>
  <div *ngFor="let d of dropList">{{ d.name }}</div>
</div>

Nous rendons les éléments déplaçables en définissant le draggable attribuer à true. Nous fabriquons tous les articles en dragList déplaçable.

Pour obtenir les données de l’objet que nous faisons glisser, nous passons dans le d s’opposer à onDragStart pour que nous puissions appeler setData avec l’index de l’élément que nous faisons glisser.

Nous rendons ensuite le dropList les éléments qui seront affichés après avoir déposé certains éléments de la liste de glissement sur le rectangle inférieur.

Ensuite on fait une drop zone en écoutant le dragover et drop événements.

Ajouter un glisser-déposer à l’aide de la bibliothèque ngx-drag-drop

En outre, nous pouvons facilement ajouter des fonctionnalités de glisser-déposer dans nos applications angulaires à l’aide de la bibliothèque ngx-drag-drop.

Pour l’installer, nous exécutons :

npm i ngx-drag-drop

Ensuite, nous pouvons ajouter facilement des listes par glisser-déposer avec les directives et événements fournis.

Tout d’abord, nous ajoutons le DndModule dans le module de notre application en écrivant :

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { DndModule } from "ngx-drag-drop";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DndModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Cela nous permettra d’utiliser ngx-drag-drop dans les composants de AppModule.

Puis dans app.component.tsnous écrivons:

import { Component } from "@angular/core";
import { DndDropEvent, EffectAllowed } from "ngx-drag-drop";

interface Draggable {
  id: number;
  name: string;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  dragList: Draggable[] = [
    { id: 1, name: "foo" },
    { id: 2, name: "bar" },
    { id: 3, name: "baz" },
    { id: 4, name: "qux" },
    { id: 5, name: "abc" },
  ];
  dropList: Draggable[] = [];
  draggable = {
    data: "myDragData",
    effectAllowed: "all" as EffectAllowed,
    disable: false,
    handle: false,
  };
  indexOfItemBeingDragged: number | undefined = undefined;

  onDragStart(event: DragEvent, draggedObject: Draggable) {
    const index = this.dragList.findIndex((l) => l.id === draggedObject.id);
    this.indexOfItemBeingDragged = index;
  }

  onDragEnd(event: DragEvent, draggedObject: Draggable) {
    const index = this.dragList.findIndex((l) => l.id === draggedObject.id);
    this.indexOfItemBeingDragged = index;
  }

  onDraggableCopied(event: DragEvent) {
    console.log("draggable copied", JSON.stringify(event, null, 2));
  }

  onDraggableLinked(event: DragEvent) {
    console.log("draggable linked", JSON.stringify(event, null, 2));
  }

  onDraggableMoved(event: DragEvent) {
    console.log("draggable moved", JSON.stringify(event, null, 2));
  }

  onDragCanceled(event: DragEvent) {
    console.log("drag cancelled", JSON.stringify(event, null, 2));
  }

  onDragover(event: DragEvent) {
    console.log("drag over", JSON.stringify(event, null, 2));
  }

  onDrop(event: DndDropEvent) {
    if (typeof this.indexOfItemBeingDragged !== "number") {
      return;
    }
    const draggedObject = this.dragList[this.indexOfItemBeingDragged];
    this.dragList.splice(this.indexOfItemBeingDragged, 1);
    this.dropList.push(draggedObject);
    this.indexOfItemBeingDragged = undefined;
  }
}

Nous avons ajouté le dragList et dropList tableaux avec tableaux Draggable objets.

Nous voulons mettre les objets dans dragList dans dropList en fournissant une interface utilisateur permettant aux utilisateurs de déplacer les éléments de dragList à dropList.

Les méthodes dans AppComponent sont des fonctions de gestionnaire d’événements pour divers événements de glisser. Nous ajoutons le draggable objet avec quelques options que nous avons fournies à ngx-drag-drop.

Puisque nous voulons déplacer l’élément déplacé de dragList à dropList lorsque le glissement est terminé, nous ajoutons la logique pour le faire dans le onDragEnd méthode.

Nous obtenons l’élément qui est glissé par le id valeur avec findIndex. Ensuite, nous supprimons cela de dragList avec splice et l’index renvoyé par findIndex. Et puis nous ajoutons cet objet dans dropList avec push.

Ensuite, dans le modèle, nous ajoutons la liste HTML par glisser-déposer. Pour ce faire, nous écrivons :

app.component.html

<h1>Drag List</h1>
<div
  *ngFor="let d of dragList"
  [dndDraggable]="draggable.data"
  [dndEffectAllowed]="draggable.effectAllowed"
  [dndDisableIf]="draggable.disable"
  (dndStart)="onDragStart($event, d)"
  (dndCopied)="onDraggableCopied($event)"
  (dndLinked)="onDraggableLinked($event)"
  (dndMoved)="onDraggableMoved($event)"
  (dndCanceled)="onDragCanceled($event)"
  (dndEnd)="onDragEnd($event, d)"
>
  {{ d.name }}
  <div *ngIf="draggable.handle" dndHandle>HANDLE</div>

  <span [hidden]="!draggable.disable">DISABLED</span>
</div>

<h1>Drop List</h1>
<section
  dndDropzone
  (dndDragover)="onDragover($event)"
  (dndDrop)="onDrop($event)"
  style="border: 1px orangered solid; border-radius: 5px; padding: 15px"
>
  <div *ngFor="let d of dropList">{{ d.name }}</div>
  <div dndPlaceholderRef>Drop here</div>
</section>

Nous rendons les objets dans dragList en divs avec ngFor. Et nous les rendons déplaçables en ajoutant les directives et en écoutant les événements fournis par ngx-drag-drop.

Nous écoutons la fin de l’action de glissement en écoutant le dndEnd événement.

Et nous passons dans le d objet que nous voulons déplacer vers le dropList en le passant dans la méthode.

Il émet également le dndStart événement lorsque nous commençons à glisser.

Le dndCopied L’événement est émis lorsqu’un élément est glissé avec le copy effet.

Le dndLinked L’événement est émis lorsqu’un élément est glissé avec le link effet.

Le dndCanceled l’événement est émis lorsque le glissement est annulé

Et le dndDrag L’événement est émis lorsqu’un élément est déplacé.

Nous fixons le dndEffectAllowed attribut pour définir l’effet de glissement autorisé. Les effets autorisés incluent 'move', 'copy', 'link', 'none', 'copyMove', 'copyLink', 'linkMove' et 'all'.

Dans la zone de largage section élément, nous ajoutons l’élément dndDropzone directif.

Nous fixons le indexOfItemBeingDragged quand nous commençons à faire glisser en définissant cela dans le onDragStart méthode. De cette façon, nous savons ce que nous faisons glisser lorsque nous commençons à le faire.

De même, nous faisons la même chose sur onDragEnd nous connaissons donc l’index de l’élément déplacé.

Enfin, dans le onDrop méthode, on obtient le draggedObject par le indexOfItemBeingDragged valeur de la dragList. Et puis nous appelons dragList.splice pour supprimer l’élément par le indexOfItemBeingDragged depuis dragList.

Ensuite, nous ajoutons l’élément au dropList avec push. Et nous avons mis indexOfItemBeingDragged retour à undefined nous savons donc que rien n’est traîné maintenant.

Nous ajoutons le dndDropzone à l’élément de zone de dépôt pour en faire un élément de zone de dépôt. Ensuite, nous pouvons écouter les événements qui y sont répertoriés.

Et on ajoute le dndPlaceholderRef directive pour que le div s’affiche lorsque nous faisons glisser des éléments dessus. En conséquence, nous devrions voir que nous pouvons faire glisser les mots de la liste supérieure vers la zone de dépôt et que les mots y restent.

Kendo UI pour la fonctionnalité glisser-déposer angulaire

Si vous utilisez le Progress Interface utilisateur Kendo pour angulaire bibliothèque de composants pour accélérer votre développement, vous pouvez ajouter des composants prédéfinis glisser déposer fonctionnalité pour définir n’importe quel élément HTML ou composant angulaire comme cible de glisser-déposer.

Personnalisez davantage l’interaction entre les cibles à l’aide d’un large éventail de propriétés et d’événements. Voir la démo fournie :

Kendo UI pour Angular est livré avec un essai gratuit de 30 jours que vous pouvez tester aujourd’hui.

Conclusion

Angular est un framework qui nous offre une manière organisée de créer des applications Web frontales. Parfois, nous souhaitons intégrer des fonctionnalités de glisser-déposer dans nos applications Web. Nous pouvons le faire facilement avec du JavaScript simple ou une bibliothèque.

La bibliothèque ngx-drag-drop nous permet de personnaliser plus facilement les options de glisser-déposer.

JavaScript simple nous permet d’ajouter du glisser-déposer sans ajouter de nouvelle bibliothèque. Il est également simple d’ajouter un glisser-déposer avec une API native en utilisant du JavaScript simple.

Et une bibliothèque commerciale comme Kendo UI for Angular vous permet d’ajouter le glisser-déposer à un certain nombre d’autres composants d’interface utilisateur prédéfinis.