Search code examples
javascriptangulardrag-and-drop

Drag Drop CDK: keep showing dragged element inside starting list

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

EXPECTED BEHAVIOR enter image description here

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

Solution

  • 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!