使用角度材质激活跨列拖放，而不阻止cdkDropList中项目的移动

Question

要求-在不阻止cdkDropList中项目移动的情况下，使用角度材质激活跨列拖放。

条件-动态创建cdkDropList

已尝试-

👉Css翻译-

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

👉指令-cdkDropListSortingDisabled

👉动态添加用于转换的内联css：拖动时translate3d(0px，0px，0px)结果-应用的内联css被转换的材料内置代码所取代。

示例-(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');
}

👉在cdkDragEnded 上实现---$event.source.dragRef.reset()

👉问题视频https://drive.google.com/file/d/1p2GLmULUZwVtR4kzjUtwCs74Qjiq4HgG/view?usp=sharing

在上面的视频中，当我们在同一列中拖放时，它工作得很好。但当我们尝试跨列拖放时，我想防止卡片移动。

为同一列拖放实现的代码-

Answer 1

Solution1:您可以向.cdk拖动占位符类添加CSS规则，如

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

注意：这也会影响你从中拖动的列表，所以你可能想更具体地了解你将其放入的容器

解决方案2-

尝试将其放在源列表项上

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