当光标不在材料cdk拖放中的放置区时，删除放置区域的占位符

Question

当拖动项目移动到放置区域时，该区域将突出显示并为其创建一个占位符。但是，如果鼠标点正在移开放置区域并释放放置项目。它仍然落入下降区。

拖放问题演示

预期行为：

一旦鼠标指针移离放置区，用户就会释放鼠标或取消拖动。它应该返回到拖动开始列表。

斯塔克闪电战

Answer 1

基本上，您要检查当项目被丢弃时，它是否被允许容器。

我们可以使用CdkDrag的cdkDragDropped事件。 cdkDragDropped发出具有接口类型的对象CdkDragDrop。 CdkDragDrop有一个名为 isPointerOverContainer: boolean 的属性，该属性返回放置项目时用户的指针是否位于容器上。

我已经在堆栈闪电战上创建了一个示例代码。

基本上，我所做的是：

1. 听了cdkDragDropped cdkDrag元素的事件：<div class="example-box" *ngFor="let item of todo" cdkDrag (cdkDragDropped)="dragDropped($event)">{{item}}</div>
2. 在dragDropped函数中，我存储了标志：dragDropped(event: CdkDragDrop<string[]>) { this.isPointerOverContainer = event.isPointerOverContainer; }
3. 在drop函数中，我检查了相同的标志：if (this.isPointerOverContainer) {...} else { //dropped outside }

目前，如果物品掉落到外面，它将恢复到原来的位置。但是，动画没有处理，您可以探索该部分。