How to use a placeholder for Angular Material 7 drag and drop?

问题

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).

回答1:

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!

来源：https://stackoverflow.com/questions/54549461/how-to-use-a-placeholder-for-angular-material-7-drag-and-drop