Comment utiliser le glisser-déposer avec Angular 7 CDK + Kendo UI

Au cours de mes voyages lors de nombreuses conférences angulaires différentes l’année dernière, on m’a interrogé sur l’utilisation de Kendo UI aux côtés de choses comme Angular Material ou CDK. Avec les dernières mises à jour dans Angular 7, je pensais que ce serait un moment merveilleux pour montrer le CDK angulaire travailler côte à côte avec Kendo UI dans une application angulaire.

Une nouvelle fonctionnalité dans le CDK, à partir de la version 7. , c’est un glisser-déposer dont je ne cesse de parler. J'ai donc décidé de revenir à l'application très élégante de Kendo UI Angular 7 todo sur laquelle nous avons travaillé précédemment et que nous allons inclure dans celle-ci aujourd'hui.

Ci-dessous, j'ai inclus des liens vers la liste complète. code source et présentation vidéo de l'application – n'hésitez pas à regarder et à suivre, ou tout simplement à continuer de lire.

Découvrez le code dans ] github !

Vous pouvez également regarder cet épisode sur Angular Air marchant dans cette application .

LIVE NOW avec @schwarty & @Brocco pour parler des merveilles . ] @AngularAir CDK par glisser-déposer !! https://t.co/Uelyh7Yj2x @AngularAir pic.twitter.com/CS0ab11Cz5

– Alyssa Nicoll (@AlyssaNicoll) le 16 janvier 2019

Nous vous reviendrons. 19659011] Pour commencer avec la fonction glisser-déposer de CDK, nous devons d'abord installer le CDK angulaire avec toutes ses fonctionnalités, dont le glisser-déposer.

Installer CDK

npm i @ angular / cdk

Nous devons maintenant importer le DragDropModule dans notre NgModule .

Importer CDK dans votre NgModule

 // app.module.ts

importer {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations';
importer {TodoComponent} de './todo/todo.component';
importer {BrowserModule} de '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
importer {AppComponent} depuis './app.component';
importer {ButtonsModule} à partir de '@ progress / kendo-angular-buttons';
importer {InputsModule} depuis '@ progress / kendo-angular-input';

importer {DragDropModule} à partir de '@ angular / cdk / drag-drop';

@NgModule ({
  déclarations: [
    AppComponent,
    TodoComponent,
  ],
  importations: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    InputsModule,
    DragDropModule,
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

cdkDrag

Nous pouvons maintenant commencer à appliquer le glisser-déposer en utilisant la directive cdkDrag que nous pouvons placer sur tout élément que nous souhaitons faire glisser! Pour notre application, nous souhaitons faire glisser les boutons de Kendo UI dans la liste:

  
     {{todo}} 
  
  

cdkDropList

Il est donc vrai que les boutons sont maintenant déplaçables. Cependant, nous aimerions que les éléments de la liste restent dans la liste. Heureusement, les lecteurs de CDK ont déjà pensé à cela. Ils ont créé une directive cdkDropList qui peut être définie autour des éléments cdkDrag .

  
     {{todo}} 
  
  

Alors maintenant, nos objets déplaçables sont limités dans la zone cdkDropList . Toutefois, si vous remarquez que lorsque vous supprimez une tâche, notre modèle de données n’est pas mis à jour et nous ne sommes donc jamais en mesure de mettre à jour notre liste. Heureusement, l'équipe du CDK a également pensé à cela !!

Il suffit d'utiliser cet événement pour mettre à jour notre modèle de données this.todos ! Pour ce faire, nous allons créer une méthode qui appellera la méthode moveItemInArray de CDK . Je l'ai appelé reorderList .

   reorderList (événement: CdkDragDrop ) {
    moveItemInArray (this.todos, event.previousIndex, event.currentIndex);
  }

Nous appelons ensuite reorderList sur la division qui enveloppe notre liste (qui a également cdkDropList ) lorsque l'événement cdkDropListDropped est déclenché.

img_5 capture d'écran du fichier html pointant sur l'événement cdkDropListDropped que nous appelons "/>

Notre liste de tâches à faire est en cours de réorganisation lorsque vous effectuez un glisser-déposer! 1965

Notez que nous n’avons pas de données persistantes dans cette application. Par conséquent, la liste sera réinitialisée. Une fois que nous avons ajouté des appels pour enregistrer nos données dans une base de données, nous devions également nous assurer que nous appelions également save sur l'événement drop de cdkDropListDropped .

d'Animation

. Aussi beau que cela puisse être, nous pouvons ajouter un un peu de vernis en faisant la transition de nos éléments au fur et à mesure que nous les faisons glisser. Les directives glisser-déposer ajoutent des classes et des transformations aux éléments permettant la création d'animations!

. cdk-drag - L'ajout de transition à cette classe s'anime au fur et à mesure que l'utilisateur trie une liste.

Pour les utiliser, il suffit d'ajouter des transitions:

 / * Animate articles comme ils sont triés. * /
.cdk-drop-list-dragging .cdk-drag {
  transition: transformer 0,5s-Bezier cubique (0,88, -0,19, 0,26, 1,27);
}

Regardez maintenant comment la liste se met à jour merveilleusement avec cette transition simple sur les boutons au fur et à mesure qu'ils glissent-et-déposent!

J'ai été vraiment impressionné par la qualité de la réflexion Les décisions prises par l’équipe CDK et la facilité d’utilisation du module glisser-déposer sont simples. Il y a encore plus de choses que nous n'avons pas couvertes, comme attacher des données, glisser d'une liste à une autre (comme Trello) et personnaliser la zone de glissement à l'aide d'une poignée!

What About Mobile?

On the Angular Air podcast que j'ai lié à ce qui précède, nous avons examiné cette application et expliqué comment j'ai implémenté le glisser-déposer. Mon bon ami et co-membre du jury Mike Brocchi a mentionné un bon point, "qu'en est-il de la téléphonie mobile"? Je suis à nouveau stupéfait par la réflexion de l’équipe angulaire du CDK. J'ai navigué jusqu'à leurs docs et essayé de l'utiliser dans mon téléphone:

Comme vous pouvez le constater, je peux saisir l'élément et le faire glisser à l'aide de événements tactiles mobiles, par défaut, prêts à l'emploi! 1965

Si vous souhaitez en savoir plus sur la création de cette application avec l'interface utilisateur de Kendo pour Angular ou plus sur les animations angulaires utilisées, consultez les ressources suivantes:

A Snazzy To -Do App utilisant Kendo UI et Angular

VIDEO
BLOG

Animations angulaires personnalisées dans notre appli Tâches pour Kendo UI

VIDEO
BLOG

Comme toujours, merci de suivre et joyeux codage tout le monde !!!