Angular CDK 拖放：不要移动源项目

Question

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

有没有办法强制源项目保留在原处，同时仍然可以拖放项目？基本上，我想要它的复制行为而不是移动行为。

我已经看到其他问题基本上与我想要实现的目标相对应，但其中 none 确实对我有帮助，因为这些问题更多的是关于如何在技术上完成复制项目的同时我想知道如何在 UI 中实现此行为，因为查看该项目是否消失非常令人困惑。

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

和

将transferArrayItem替换为copyArrayItem

Answer 3

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

情况一：从一个可拖列表复制到另一个可拖列表

   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 拖放：不要移动源项目

Angular CDK Drag & Drop: Don't move source item

drag-and-drop

angular

angular-cdk