Quando inizia il drag di un oggetto, Angular CDK crea un clone di quell'oggetto e lo visualizza accanto al puntatore. In caso di necessità, possiamo personalizzare l'aspetto dell'oggetto durante la fase di dragging inserendo all'interno dell'oggetto stesso un qualunque tag HTML con la direttiva *cdkDragPreview. Grazie a questa direttiva, questo tag HTML non viene generato finchè non inizia la fase di dragging. Quando inizia, questo tag viene generato e mostrato al posto delloggetto principale.
<div cdkDropList (cdkDropListDropped)="drop($event)"> <div *ngFor="let p of people" cdkDrag> {{p.fullname}} <img *cdkDragPreview [src]="p.picture" [alt]="p.fullname"> </div> </div>
In questo esempio, viene generata una lista di oggetti persona dove per ogni elemento viene mostrata la proprietà fullname. Quando l'utente inizia il dragging di uno degli elementi che rappresenta una persona, l'elemento viene clonato, ma al suo posto viene mostrato il tag img che mostra la foto della persona.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire il colore CSS con HWB
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Utilizzare gRPC su App Service di Azure
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire attività basate su eventi con Azure Container Jobs
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare database e servizi con gli add-on di Container App
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente