angular / angular/components

Allow to create cdkDragPreview from the drag drop service

Open
#16,111 3 comments 3 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start by reading the drag-drop service and the cdkDragPreview, cdkDragPlaceholder, cdkDropList, dragstart, and drop entry points described in the issue. Determine the intended lifecycle and ownership of Base and Preview outside a cdkDropList, including what should happen after drop. Done means the API behavior and cleanup rules are clearly defined and supported for the stated use case.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.