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
Migrare una service connection a workload identity federation in Azure DevOps
Gestire undefined e partial nelle reactive forms di Angular
Usare un KeyedService di default in ASP.NET Core 8
Generare un hash con SHA-3 in .NET
Reactive form tipizzati con FormBuilder in Angular
Gestire i null nelle reactive form tipizzate di Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Effettuare il binding di date in Blazor
Eseguire i worklow di GitHub su runner potenziati
Utilizzare Copilot con Azure Cosmos DB
C# 12: Cosa c'è di nuovo e interessante
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core