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

Question

当拖动项在放置区域上移动时，该区域将突出显示并为其创建一个占位符。但是，如果鼠标指针移开放置区域并释放放置，则将其放下。它仍然会掉入放置区。

Drag Drop Issue Demo

预期的行为：

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

stackblitz

Answer 1

基本上，您想检查项目在放下时是否允许放入容器。

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

我已经在stackblitz上创建了示例代码。

基本上，我所做的是：

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 }

当前，如果物品掉到外面，它将回到其原始位置。但是，动画没有处理，您可以探索该部分。