Angular Обнаружение перетаскивания циновки при остановке перетаскивания через div - PullRequest
Новая
       27

Angular Обнаружение перетаскивания циновки при остановке перетаскивания через div

0 голосов
/ 18 февраля 2020

Я использую angular перетаскивание материала, и у меня есть два списка, таких как пример перетаскивания из документов. Я хотел бы иметь возможность перетаскивать один из элементов на один из двух элементов div, а затем возвращаться к исходному списку, но определять, на какой элемент div он выпал. Я попытался использовать функцию dragEnded, но она дает только координаты X и Y. В любом случае, чтобы получить идентификатор элемента div, перетаскиваемого через элемент? 

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

1 Ответ

0 голосов
/ 18 февраля 2020

в случае (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)

...