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
Sfruttare al massimo i topic space di Event Grid MQTT
Eseguire una query su SQL Azure tramite un workflow di GitHub
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare Model as a Service su Microsoft Azure
Eseguire attività con Azure Container Jobs
Usare un KeyedService di default in ASP.NET Core 8
Reactive form tipizzati con modellazione del FormBuilder in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Evitare la command injection in un workflow di GitHub
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload