Activate cross column drag and drop using angular material without Prevent shifting/movement of the items in a cdkDropList

Question

Requirement - Activate cross column drag and drop using angular material without Prevent shifting/movement of the items in a cdkDropList.

Conditions - cdkDropList are created dynamically

Tried -

👉 Css translation -

.cdk-drop-list-receiving {
    .drag-box {
      transform: translate3d(0px, 0px, 0px) !important;
    }
}

👉 Directive - cdkDropListSortingDisabled

👉 Dynamically adding inline css for transform: translate3d(0px, 0px, 0px) while dragging Result - Applied inline css is replaced by material inbuilt code of transform.

Example - (cdkDragMoved)="onDragMoved($event)"

cdkDragMove($event) {
    const allDraggingElements: any = document.querySelectorAll('.cdk-drop-list-receiving .cdk-drag');
    [...allDraggingElements].map(ele => ele.style.transform = 'translate3d(0px, 0px, 0px)!important');
  }

👉 Implemented --- $event.source._dragRef.reset() on cdkDragEnded

👉 Problem video https://drive.google.com/file/d/1p2GLmULUZwVtR4kzjUtwCs74Qjiq4HgG/view?usp=sharing

In the above video when we drag and drop in same column it is working perfectly . But when we are trying cross column drag and drop I want to prevent card from shifting.

Code implemented for same column drag and drop -

Answer 1

Solution1: You can add a CSS rule to the .cdk-drag-placeholder class like this

.cdk-drag-placeholder {
display:none;
}

Note: This will affect the list you are draggin it from too, so you might want to get more specific to the container you are dropping it into

Solution 2-

Try putting this on the source list item

<div *cdkDragPlaceholder style="height: 0px"></div>