angular / angular/components

Allow to create cdkDragPreview from the drag drop service

Offen
#16,111 3 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/drag-drop feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, den drag-drop service sowie die im Issue beschriebenen Einstiegspunkte cdkDragPreview, cdkDragPlaceholder, cdkDropList, dragstart und drop zu lesen. Ermittle den vorgesehenen Lebenszyklus und die Zuständigkeit für Base und Preview außerhalb einer cdkDropList, einschließlich dessen, was nach dem Drop geschehen soll. Als abgeschlossen gilt die Aufgabe, wenn das API-Verhalten und die Regeln für die Bereinigung für den genannten Anwendungsfall klar definiert und unterstützt sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.