如何在Angular Material 7拖放中使用占位符? [英] How to use a placeholder for Angular Material 7 drag and drop?

问题描述

我正在使用Angular Material 7的拖放库，我正在尝试弄清楚如何使用 cdkDragPlaceholder .

I am using Angular Material 7's Drag and Drop library, and I am trying to figure out how to use the cdkDragPlaceholder.

CdkDragPlaceholder

将用作模板占位符的模板的元素 CdkDrag 拖动时.占位符显示在 拖动元素的位置.

Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged.

选择器:ng-template [cdkDragPlaceholder]

Selector: ng-template[cdkDragPlaceholder]

我尝试了以下代码(参见Stackblitz ):

I have tried the following code (see Stackblitz):

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

，但拖动时没有占位符.如果我将上述代码用cdkDropList指令包装在div中，则可以看到占位符.我该怎么做才能确保仅对附加了cdkDrag指令的元素正确使用占位符(不必使用cdkDragList).

but there are no placeholders when dragging. If I wrap the above code inside a div with the cdkDropList-directive however I am able to see the placeholder. What can I do to make sure I use the placeholder correctly, only for an element with the cdkDrag-directive attached to it (not necesseraly using a cdkDragList).

推荐答案

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

It seems like the feature you're looking for may not be available yet.

我也对此进行了测试，尝试使用*cdkDragPlaceholder元素而不创建cdkDropList似乎没有用. 文档没有区别，但它们也没有提供任何在列表之外工作的占位符的示例.

I tested this too, and trying to use a *cdkDragPlaceholder element without creating a cdkDropList doesn't appear to appear to work. The docs don't make this distinction, but they also don't provide any examples of placeholders working outside of a list.

您可能会留意此GitHub 问题 >，因为它似乎在要求您尝试实现的功能.

You might keep an eye on this GitHub issue, as it seems to be asking for the feature you're trying to implement.

祝你好运！

这篇关于如何在Angular Material 7拖放中使用占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！