Add support for drop target placeholder to CDK drag and drop

[jimitndiaye]

Bug, feature request, or proposal:

Add support for drop target placeholder to CDK drag and drop

What is the expected behavior?

When the dragged item enters the target drop area/list, allow displaying a placeholder at the target location.

What is the current behavior?

There is currently no support for a drop placeholder, even though we do have a drag placeholder.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

When maintaining an ordered drop list it is helpful to show a preview of where the item will be dropped in the list as the dragged item is moved around (e.g like this). In the current implementation depicted on material.angular.io a blank space is created at the drop location but there doesn't seem to be any way of providing an ng-template for that space. A directive like cdkDropPlaceholder

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

I have previously done something similar in the past via something like the following:

@Directive({
 selector: '[tkDropTargetPlaceholder]'
})
export class DropTargetPlaceholderDirective {
 constructor(
 template: TemplateRef<Object>,
 viewContainer: ViewContainerRef,
 @Host() public dropTarget: DropTargetDirective
 ) {
 dropTarget._registerPlaceholder(template, viewContainer);
 }
}

Here DropTargetDirective would correspond to something like cdkDropList. On dragOver of cdkDropList you would insert the placeholder template at the target index in the list.

[jimitndiaye]

Actually it seems this already exists in the form of CdkDragPlaceholder but was not demoed on material.angular.io. I was expecting the template to be defined on the drop list but it seems it was implemented on the dragged item itself. Could we add an example similar to what exists for the preview directive?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}