当光标不在 material cdk 拖放中的放置区域时删除放置区域的占位符
Removing placeholder for drop area when cursor not in drop zone in material cdk drag & drop
当拖动项移过放置区域时，该区域会突出显示并为其创建一个占位符。但是，如果鼠标点正在离开放置区域并释放放置项目。它仍然掉落到掉落区。
Drag Drop Issue Demo
预期行为：
一旦鼠标指针离开拖放区并且用户释放鼠标或取消拖动。它应该返回到拖动开始列表。
基本上，您想要检查物品掉落时是否允许使用容器。
我们可以使用CdkDrag's cdkDragDropped event. cdkDragDropped emits the object which has a type of interface CdkDragDrop。 CdkDragDrop 有一个名为 isPointerOverContainer: boolean 的 属性，它 returns 当项目被放下时用户的指针是否在容器上。
我已经在 stackblitz 上创建了示例代码。
基本上，我所做的是：
- 已收听
cdkDrag 元素的 cdkDragDropped 事件：<div class="example-box" *ngFor="let item of todo" cdkDrag (cdkDragDropped)="dragDropped($event)">{{item}}</div>
- 在
dragDropped函数中，我存储了标志：dragDropped(event: CdkDragDrop<string[]>) {
this.isPointerOverContainer = event.isPointerOverContainer;
}
- 在
drop 函数中，我检查了相同的标志：if (this.isPointerOverContainer) {...} else { //dropped outside }
目前，物品掉在外面会回到原来的位置。但是，动画没有处理，你可以探索那部分。
当拖动项移过放置区域时，该区域会突出显示并为其创建一个占位符。但是，如果鼠标点正在离开放置区域并释放放置项目。它仍然掉落到掉落区。
Drag Drop Issue Demo
预期行为：
一旦鼠标指针离开拖放区并且用户释放鼠标或取消拖动。它应该返回到拖动开始列表。
基本上，您想要检查物品掉落时是否允许使用容器。
我们可以使用CdkDrag's cdkDragDropped event. cdkDragDropped emits the object which has a type of interface CdkDragDrop。 CdkDragDrop 有一个名为 isPointerOverContainer: boolean 的 属性，它 returns 当项目被放下时用户的指针是否在容器上。
我已经在 stackblitz 上创建了示例代码。
基本上，我所做的是：
- 已收听
cdkDrag元素的cdkDragDropped事件：<div class="example-box" *ngFor="let item of todo" cdkDrag (cdkDragDropped)="dragDropped($event)">{{item}}</div> - 在
dragDropped函数中，我存储了标志：dragDropped(event: CdkDragDrop<string[]>) { this.isPointerOverContainer = event.isPointerOverContainer; } - 在
drop函数中，我检查了相同的标志：if (this.isPointerOverContainer) {...} else { //dropped outside }
目前，物品掉在外面会回到原来的位置。但是，动画没有处理，你可以探索那部分。