Блог

В моем приложении у меня есть два списка элементов, которые могут быть перенесены из одного в другой с помощью DragDropModule из Angular Material.

Я хотел бы использовать перетаскивание, но также использовал двойной щелчок по одному из элементов списка, чтобы автоматически перенести его в другой список.

Вот мой код: StackBlitz ЗДЕСЬ

 <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
<div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
  

Но это не работает, и я не знаю, как это сделать, я впервые использую перетаскивание.
Если у кого-нибудь есть идея сделать это, мне было бы интересно.

Вот ошибка, отображаемая в консоли при двойном щелчке:

ОШИБКА TypeError: не удается прочитать свойство ‘data’ неопределенного

Это из-за $event for cdkDropListDropped и dblclick отличается. For dblclick $event равен экземпляру MouseEvent, поэтому нет информации о том, откуда был перемещен элемент.

Мне пришло в голову одно решение — просто написать пользовательскую функцию, которая будет принимать имя элемента из события dblclick и получать имена цели и источника. С помощью этой информации вы можете легко перемещать элементы между массивами напрямую.

В шаблоне, который вам нужно использовать для перехода от todo к done (dblclick)="dblclickMove($event.target.innerText, 'done', 'todo')" и наоборот для другого блока (dblclick)="dblclickMove($event.target.innerText, 'todo', 'done')"

На контроллере функция выглядит следующим образом:

   dblclickMove(itemName: string, ...targets: string[]) {
    this[targets[0]] = [
      ...this[targets[1]].splice(this[targets[1]].indexOf(itemName), 1), 
      ...this[targets[0]]
      ];
  }
  

StackBlitz