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

问题描述

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

<块引用>

CdkDragPlaceholder

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

选择器:ng-template[cdkDragPlaceholder]

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

 
<div class="example-custom-placeholder" *cdkDragPlaceholder>asd</div>{{电影}}

但是拖动时没有占位符.如果我使用 cdkDropList-directive 将上面的代码包装在一个 div 中，但是我能够看到占位符.我该怎么做才能确保正确使用占位符，仅适用于附加了 cdkDrag 指令的元素(不必使用 cdkDragList).

解决方案

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

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

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

祝你好运！

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

CdkDragPlaceholder

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.

Selector: ng-template[cdkDragPlaceholder]

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>

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.

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.

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

Good luck!

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