Angular CDK Drag and drop with placeholders in one of the drop lists

Question

I am struggling with the following use case for Angular CDK Drag and Drop: I want the second drop list to be an array with empty elements when the component loads (because I want to have a number of placeholders there that can be replaced by the elements dragged from the first list).

I created a sandbox here: https://codesandbox.io/embed/angular-iiuhq?fontsize=14

I think the code is ok as idea (although for some reason I cannot get it to work in the sandbox). The only problem is that the dragging is super unnatural and choppy. I'd want the placeholder to remain visible until I dragged the element on top of it, then disappear beneath the dragged element. Now, it seems like the dragged element pushes the others left and right or up and down and then one of the placeholders disappears.

Maybe you guys have a better approach that I didn't think about.

Also, I know about the *cdkDragPlaceholder directive, but it was not obvious to me how I could use it in one of the drop lists and make the placeholders visible there always (so not only when the drag event starts).

Larest · Accepted Answer · 2020-01-27 15:25:31Z

0

I used one cdkDropList per element for simular task: stackBlitz

answered Jan 27, 2020 at 15:25

Larest

3861 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iulia Mihet Over a year ago

I ended up doing that too in the end. Your example is not working, btw

Larest Over a year ago

Thanks for testing it) It works it just needs >1430px browser window . angular-srg6e3.stackblitz.io

Collectives™ on Stack Overflow

Angular CDK Drag and drop with placeholders in one of the drop lists

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related