如何使用占位符进行 Angular Material 7 拖放？答案

【问题标题】：How to use a placeholder for Angular Material 7 drag and drop?如何使用占位符进行 Angular Material 7 拖放？
【发布时间】：2019-06-17 23:25:40
【问题描述】：

我正在使用 Angular Material 7 的 Drag and Drop library，我正在尝试弄清楚如何使用 cdkDragPlaceholder。

CdkDragPlaceholder

将用作占位符模板的元素 CdkDrag 当它被拖动时。占位符显示在被拖动元素的位置。

选择器：ng-template[cdkDragPlaceholder]

我已尝试以下代码 (see Stackblitz)：

 <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    <div class="example-custom-placeholder" *cdkDragPlaceholder>asd</div>
    {{movie}}
  </div>

但拖动时没有占位符。如果我使用cdkDropList-directive 将上面的代码包装在一个 div 中，但是我可以看到占位符。我可以做些什么来确保我正确使用占位符，仅适用于附加了cdkDrag-directive 的元素（不一定使用cdkDragList）。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您正在寻找的功能似乎尚不可用。

我也对此进行了测试，尝试使用 *cdkDragPlaceholder 元素而不创建 cdkDropList 似乎不起作用。 The docs 没有做出这种区分，但它们也没有提供任何在列表之外工作的占位符示例。

您可能会关注this GitHub 问题，因为它似乎要求您尝试实现的功能。

祝你好运！

【讨论】：