拖放CDK：保持在起始列表中显示被拖动的元素

Question

我正在玩cdk拖放功能，因为我需要它来创建一个用于工作的POC。我从文档网站开始使用这段代码。我看到每次我把一个元素拖到它的列表之外时，这个元素都是隐藏的，直到我把它放到同一个列表或另一个列表中。

如果我错了，请告诉我，但是拖动的元素似乎不是列表项的副本，而是元素本身。

总之，我希望列表在拖动其中一个元素时不要更改其布局。

长话短说：

我在cdk文档中没有找到任何这样做的内容。

Answer 1

也需要这个，但找不到库支持的内容。

我的解决方案是隐藏整个原始cdkDropList，并用一个相似的外观替换它。

它不会对所有人都有效，对我来说它有效，因为每个cdkDrag都在它自己的cdkDropList中。

Answer 2

到目前为止，预期的行为还没有实现，Github上关于这一点还有一个悬而未决的问题。

简而言之，解决方案是将拖动的项目临时添加到源列表中，直到项目到达最终目的地，然后从源列表中删除临时项目。

这里有一个链接指向对我有效的解决方案：https://stackblitz.com/edit/angular-krmecd

解决方案的关键代码

<mat-list 
      cdkDropList
      [cdkDropListData]="sItems"
      cdkDropListSortingDisabled
      [cdkDropListEnterPredicate]="noReturnPredicate"
      (cdkDropListExited)="onSourceListExited($event)"
      (cdkDropListEntered)="onSourceListEntered($event)">
      <mat-list-item *ngFor="let item of sItems" cdkDrag [cdkDragData]="item">{{ item.name }}</mat-list-item>
</mat-list>

  noReturnPredicate() {
    return false;
  }

  onSourceListExited(event: CdkDragExit<any>) {
    this.sItems.splice(event.container.getItemIndex(event.item) + 1, 0, { ... event.item.data, temp: true });
  }

  onSourceListEntered(event: CdkDragEnter<any>) {
    remove(this.sItems, { temp: true });
  }

Answer 3

在您的stackblitz更改中，cdk拖放连接排序示例。css

改变

.cdk-drag-placeholder {
  opacity: 0;
}

进入：（或直接移除）

.cdk-drag-placeholder {
  /* opacity: 0; */
}

它的消失是由于占位符的css样式。

如果要禁用排序。看看这里！