Question

我正在尝试实现一个编辑器，在其中可以拖动一项以将其添加到主要内容中，问题是当我从源项目容器中拖出时，源项目总是被销毁。

是否有办法在仍然可以拖放源项目的情况下将其保留在原位置？基本上，我想要的是复制行为，而不是移动行为。

我已经看过其他与我想要基本实现的问题相对应的问题，但是这些问题都没有真正帮助我，因为这些问题更多地是关于如何在我想知道如何复制项目的同时进行技术性复制在用户界面中实施此行为，因为它非常令人困惑，无法查看项目是否消失。

Answer 1

替换

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

使用

drop(event: any) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    copyArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

Answer 2

导入import {copyArrayItem} from '@angular/cdk/drag-drop';

AND

将transferArrayItem替换为copyArrayItem

Answer 3

您需要找到目标和源的位置，然后复制值

案例 1：从一个可拖动列表复制到另一个可拖动列表

   drop(event: any) {
        if (event.previousContainer === event.container) {
              moveItemInArray(
                event.container.data,
                event.previousIndex,
                event.currentIndex
              );
            } else {

              const prev_idx = event.previousIndex;
              const curr_id = event.currentIndex;
              // Copy the data.
              event.container.data[curr_id] = event.previousContainer.data[prev_idx];
        
            }
          }
    }

案例 2：将数据从列表复制到特定变量

drop(event: any) {
          // Copy the data to my-variable
                  const prev_idx = event.previousIndex;    
                  this.my-variable = event.previousContainer.data[prev_idx];
            
                }
              }
        }

Angular CDK拖放：不移动源项目

3 个答案: