angular / angular/components

Allow to create cdkDragPreview from the drag drop service

Ouverte
#16,111 3 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: cdk/drag-drop feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Feature Description

Allow the creation of cdkDragPreview elements outside of a cdkDropList.

#### Use Case

I would like to be able to drag an element Base from a zone A to a zone B, with a preview without losing the place Base was in.

On the event `dragstart` a call to DragDrop (for example) would allow me to duplicate Base or another template element passed to the creation method.
That element Preview would be draggable and would follow the cursor. Base would act as a cdkDragPlaceholder and preview as a cdkDragPreview.

On the event `drop`, I would handle myself what needs to be done. In my case, I only want to get the position of the event, which I can easily do as it's native.
Ideally, we would keep a reference to the element Base to be able to delete it at that point.

I can see difficulties on what to do of Preview or Base by default here. Should Base disappear and Preview stay at the end of the body? Should Preview get nested somewhere where it got dropped? I have no answers here.

I see this as a follow-up to #14261, in that it is a purely cdk request for all DOM nodes.

Thank you

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par lire le drag-drop service ainsi que les points d’entrée cdkDragPreview, cdkDragPlaceholder, cdkDropList, dragstart et drop décrits dans l’issue. Déterminez le cycle de vie prévu et la responsabilité de Base et Preview en dehors d’un cdkDropList, notamment ce qui doit se produire après le drop. La tâche est terminée lorsque le comportement de l’API et les règles de nettoyage sont clairement définis et pris en charge pour le cas d’utilisation indiqué.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.