Drag Drop CDK: keep showing dragged element inside starting list

Question

I'm playing with cdk Drag and Drop cause I need it to create a POC for work. I started with this code from the documentation website. I saw that every time I drag an element outside its list, said element is hidden until I drop it in the same list or in another one.

So tell me if I'm wrong, but it seems that the dragged element is not a copy of the list item, but instead it's the element itself.

In conclusion I want the list to not change its layout while I'm dragging one of its elements.

Long story short:

CURRENT BEHAVIOUR

EXPECTED BEHAVIOR

I didn't found anything to do this in the cdk documentation.

Answer 1

In your stackblitz change in cdk-drag-drop-connected-sorting-example.css

change

.cdk-drag-placeholder {
  opacity: 0;
}

into: (or just remove it)

.cdk-drag-placeholder {
  /* opacity: 0; */
}

the fact its disappearing is due to css styling of the placeholder.

---

If you want to disable Sorting. Have a look HERE!