Угловой дубликат элемента с помощью перетаскивания

Сценарий

В моем текущем проекте (Angular 8) я хочу добавить элементы из исходного списка в целевой список с помощью Angular CDK Drag & Drop-Module. После этого взаимодействия элемент должен по-прежнему отображаться в списке источников.

Проблема

После проверки примеров это выглядело довольно просто. Внутри drop-Event я заменил transferArrayItem() на copyArrayItem(), однако я хочу сохранить перетаскиваемый элемент внутри исходного списка даже при перетаскивании.

Чтобы предоставить вам упрощенный обзор, я создал официальный пример от Google и изменил обработку drop-Event, чтобы проиллюстрировать проблему (1).

У вас есть идеи, как добиться такого поведения?

1) https://stackblitz.com/edit/angular-chaxhv


angular drag-and-drop angular-cdk
person jimmy    schedule 07.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Демо попробуйте это

drop(event: CdkDragDrop<string[]>) {
    var self=this;
    if (event.previousContainer === event.container) {    
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }
    else if(event.container.id<event.previousContainer.id){
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex); 

       this.todo=this.todo.filter(function(item, pos){
                  return self.todo.indexOf(item)== pos; 
                });
    }
    else {
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex); 
     this.done=this.done.filter(function(item, pos){
              return self.done.indexOf(item)== pos; 
            });
    }

  }
person pc_coder    schedule 07.06.2020
comment
Большое спасибо! Дублирование элемента с помощью copyArrayItem () не является проблемой. Это уже работает. Проблема в том, что элемент на короткое время исчезает в списке источников во время события dragover в моем списке. - person jimmy; 08.06.2020
comment
Кажется, это невозможно с функцией перетаскивания в этой библиотеке. Чтобы решить эту часть, необходимо создать еще одно событие. - person pc_coder; 08.06.2020