1

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).

Iulia Mihet
  • 650
  • 1
  • 10
  • 34

1 Answers1

0

I used one cdkDropList per element for simular task: stackBlitz

Larest
  • 326
  • 1
  • 3
  • 15