Автоматическое перетаскивание при двойном нажатии Angular - PullRequest
Новая
       49

Автоматическое перетаскивание при двойном нажатии Angular

1 голос
/ 24 апреля 2019

В моем приложении у меня есть два списка элементов, которые можно переносить из одного в другой с помощью 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' из неопределенного

1 Ответ

3 голосов
/ 24 апреля 2019

Это из-за $event для cdkDropListDropped и dblclick отличается. Для 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

...