Comment intégrer un matériau angulaire par glisser/déposer avec un défilement virtuel?
J'essaie d'intégrer le défilement virtuel du matériau angulaire avec un glisser-déposer, mais pour une raison quelconque, lorsque j'essaie de le mettre en œuvre, les éléments sont rétablis et, lorsque j'essaie de faire glisser un élément, cela ne fonctionne pas.
Voici un résumé du code
<cdk-virtual-scroll-viewport cdkDropList itemSize="50" class="example-viewport">
<div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
Comme vous pouvez le constater, je n’ai rien fait de spécial, mis à part le fait que j’ai remplacé *ngFor par cdkVirtualFor car les docs me disent que:
*cdkVirtualForremplace*ngFordans un<cdk-virtual-scroll-viewport>, prenant en charge la même API que*ngFor.
J'ai joint ici une démo stackblitz ! Alors, comment intégrer le glisser-déposer avec le défilement virtuel?
Je suis pressé, mais je pense que les matériaux angulaires cdkDrag ne fonctionnent PAS avec virtual-scroll pour le moment, voir le document lié issue .
Après le fil de discussion mentionné, il n’ya qu’un demo qui semble fonctionner, mais les sources fournies ne sont malheureusement disponibles que sous la forme compilée js not ts.
En fait, vous devez prendre la décision de travailler avec angulaires glisser-déposer via cdkDrag OR angulaires défilant via défilement virtuel .
Si vous recherchez quelque chose comme indiqué dans l'image ci-dessous, vous devez utiliser le code de transfert d'éléments entre le code des listes. Consultez ce lien https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists
Et faites quelques ajustements rapides dans les CSS selon vos besoins, car j'ai apporté quelques modifications dans les CSS dans le navigateur lui-même pour obtenir le résultat ci-dessous dans l'image.
Vous pouvez également créer 3 colonnes ou 4 colonnes. Faites-moi savoir si vous avez besoin de moi pour vous fournir le code?
