Ad

Drag Drop CDK: Keep Showing Dragged Element Inside Starting List

- 1 answer

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 BEHAVIOURenter image description here

EXPECTED BEHAVIORenter image description here

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

Ad

Answer

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!

Ad
source: stackoverflow.com
Ad