拖放 CDK：在起始列表中继续显示拖动的元素答案

【问题标题】：Drag Drop CDK: keep showing dragged element inside starting list拖放 CDK：在起始列表中继续显示拖动的元素
【发布时间】：2019-09-09 14:45:52
【问题描述】：

我正在玩 cdk Drag and Drop，因为我需要它来创建工作用 POC。我从文档网站上的 code 开始。我看到每次我将一个元素拖到其列表之外时，该元素都会被隐藏，直到我将其放入同一个列表或另一个列表中。

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

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

长话短说：

当前行为

预期行为

我在 cdk 文档中没有找到任何可以执行此操作的内容。

【问题讨论】：

标签： javascript angular drag-and-drop

【解决方案1】：

在 cdk-drag-drop-connected-sorting-example.css 你的 stackblitz 更改中

改变

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

进入：（或直接删除）

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

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

如果您想禁用排序。看看HERE!

【讨论】：

是的，就是这样，但我也需要一个不可排序的列表。我看到他们在上一个rc中添加了这个功能。
这不会阻止项目在拖放区上被删除。它只是保持它完全显示直到那一点。
@Ulfius 我正在寻找一种解决方案，其中原始元素始终存在并且在放置区上方时不会消失，您知道该怎么做吗？我似乎找不到任何人解决了它
@Shirohige 抱歉，我还没有看到他们进行了更新以允许这样做。

【解决方案2】：

到目前为止，预期的行为仍未实现，Github 上有一个公开的issue 与此相关。

有人为此提供了一种解决方法，它实际上对我有用。
简而言之，解决方案是将拖动的项目临时添加到源列表中，直到项目到达最终目的地，然后他从源列表中删除临时项目。

以下是对我有用的解决方案的链接： 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 });
  }

【讨论】：

【解决方案3】：

也需要这个，但找不到库支持的东西。

我的解决方案是隐藏整个原始 cdkDropList 并将其替换为外观相似。

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

【讨论】：

【解决方案4】：

不知道您是否仍需要解决方案，但有 2 个事件可以帮助您为您的问题创建解决方案。

cdkDropListExited / cdkDropListEntered CdkDragEnter / CdkDragExit

当被拖动的元素被移除（这是你想要避免的）或进入容器时，会触发提到的事件。

!NOTE 这些事件在您移过目标容器时触发（但您的点击仍被按下）=> 您仍在拖动

我的解决方案是添加一个自定义占位符 div，当这些事件被触发时我会隐藏/显示它。

希望这对你来说足够清楚和平

【讨论】：