停止拖动 div 时检测 Angular Mat 拖放答案

【问题标题】：Angular Mat drag and drop detect when stop dragging over a div停止拖动 div 时检测 Angular Mat 拖放
【发布时间】：2020-02-18 05:17:27
【问题描述】：

我正在使用角度材料拖放，并且我有两个列表，例如文档中的拖放示例。我希望能够将其中一个项目拖到两个 div 之一上，然后快速返回到原始列表，但检测它掉到了哪个 div。我尝试使用材质 dragEnded 函数，但它只给你 X 和 Y 坐标。无论如何要获取项目结束拖动的 div 的 id 吗？

<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>

【问题讨论】：

我之前回答过一个类似的问题，关注这个link

标签： angular drag-and-drop angular-material

【解决方案1】：

如果(cdkDropListDropped)="drop($event)你有一个事件CdkDrapDop

在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'){...}
    }
  }

如果你有真实数据 - 一个数组，你可以使用if (event.container.data==myarrayOne)

【讨论】：