Angular 角垫拖放检测何时停止在div上拖动
我使用的是角度材质拖放,我有两个列表,比如文档中的拖放示例。我希望能够将其中一个项目拖到两个div中的一个上,然后快速返回到原始列表,但检测它拖到了哪个div上。我尝试使用material dragEnded函数,但它只提供X和Y坐标。是否仍要获取项目拖过的div的idAngular 角垫拖放检测何时停止在div上拖动,angular,drag-and-drop,angular-material,Angular,Drag And Drop,Angular Material,我使用的是角度材质拖放,我有两个列表,比如文档中的拖放示例。我希望能够将其中一个项目拖到两个div中的一个上,然后快速返回到原始列表,但检测它拖到了哪个div上。我尝试使用material dragEnded函数,但它只提供X和Y坐标。是否仍要获取项目拖过的div的id <div class="example-container"> <h2>To do</h2> <div cdkDropList #todoList="cdkDr
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList, div1, div2]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item.value}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList, div1, div2]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag (cdkDragEnded)="dragEnded($event)">
{{item.value}}
</div>
</div>
</div>
<br />
<br />
<div cdkDropList
#div1="cdkDropList"
[cdkDropListConnectedTo]="[doneList]"
style="background-color: red; width: 300px; height: 100px"
id="div1"
>Div 1</div>
<br />
<div cdkDropList
#div2="cdkDropList"
[cdkDropListConnectedTo]="[doneList]"
style="background-color: red; width: 300px; height: 100px"
id="div2"
>Div 2</div>
做
{{item.value}}
多恩
{{item.value}}
第一组
第2组
在事件中(cdkdroplistdroped)=“drop($event)
您有一个事件
在event.container.data
和event.currentIndex
中,您拥有了“数据”,您可以添加一个“傻瓜数据”[cdkDropListData]=“'one'”
,[cdkDropListData]=“'two'”,并创建一个
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
if (event.container.data=='one'){...}
if (event.container.data=='two'){...}
}
}
drop(事件:CdkDragDrop){
if(event.previousContainer==event.container){
moveItemInArray(event.container.data、event.previousIndex、event.currentIndex);
}否则{
如果(event.container.data='one'){…}
如果(event.container.data='two'){…}
}
}
如果您有真实的数据-一个数组,您可以使用If(event.container.data==myarrayOne)
我以前回答过类似的问题,请遵循以下步骤