使用 angular material 激活跨列拖放而不阻止 cdkDropList 中的项目 shifting/movement

Question

要求 - 使用 angular material 激活跨列拖放而不阻止 cdkDropList 中的项目 shifting/movement。

条件 - cdkDropList 是动态创建的

尝试过 -

Css翻译-

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

指令 - cdkDropListSortingDisabled

为转换动态添加内联 css：拖动时转换 3d(0px, 0px, 0px) 结果 - 应用内联 css 替换为 material 内置转换代码。

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

已实施 --- $event.source._dragRef.reset() on cdkDragEnded

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

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

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

Answer 1

解决方案 1：您可以将 CSS 规则添加到 .cdk-drag-placeholder class，就像这样

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

注意：这也会影响您从中拖放它的列表，因此您可能希望更具体地了解要将其放入的容器

解决方案 2-

尝试将其放入源列表项

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

使用 angular material 激活跨列拖放而不阻止 cdkDropList 中的项目 shifting/movement

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

javascript

drag-and-drop

angular-material

angular