我正在使用cdk从角材质拖放，但拖动预览不按预期工作..我希望预览看起来完全像被拖动的元素，但预览只显示元素的文本内容（没有样式）。
HTML：
<div *ngFor="let field of fields$ | async" class="fields-list-container" cdkDrag cdkDragLockAxis="y">
<div class="fields-name-desc-icon">
<i class="fa fa-tag"></i>
<div>
<div>{{field.name}}</div>
<div><em>{{field.displayType | titlecase }}</em>( )</div>
</div>
</div>
<div>
{{field.codingGroupField.creatorName}}
</div>
<div>{{field.codingGroupField.createdOn | date: 'medium' }}</div>
<actions-menu [actions]="" [actionOn]=""></actions-menu>
</div>CSS：
.fields-list-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border: solid 1px #ccc;
border-radius: 4px;
cursor: move;
.fields-name-desc-icon {
display: flex;
div {
margin-left: .5rem;
}
div:nth-child(2) {
font-size: 10px;
}
}
.fa-tag {
color: var(--rational-dark-blue);
}
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-preview {
@extend .fields-list-container;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.draggable-list.cdk-drop-list-dragging .fields-list-container:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}有人知道为什么这行不通吗？
3条答案
按热度按时间hpcdzsge1#
对于任何遇到这个问题的人来说，这可能是由于你把
.cdk-drag-preview样式放在了 where 的原因。被拖动的元素被临时移动到htmlbody的底部。如果这个元素的样式不是作用域为body的直接子元素，那么样式可能不适用。修复
要快速确定这是否是问题所在，请尝试将与拖动相关的样式移动到global styles.css/styles.scss文件（如@c-eggart的评论中所述）。或者，如果与拖动相关的样式是嵌套的，则只需 * 取消嵌套 * 即可：
发件人：
收件人：
有关详细信息，请参阅此GitHub issue。
mwkjh3gx2#
Isak的答案是正确的，也是最简单的方法，但是如果你因为某种原因无法重新排列样式，我知道有几个替代的解决方案：
1.更改预览元素的插入位置：使用
cdkDragPreview指令（文档链接）将插入点从<body>（默认值）更改为父元素或特定的ElementRef/HTMLElement1.指定不同的预览元素：使用
*cdkDragPlaceholder结构指令（文档链接）在cdkDrag元素中嵌套的元素上指定自定义预览元素/组件。如果它是一个复杂的元素，可能值得为此创建一个单独的组件2sbarzqh3#
应用样式如下工程为我