angular + cdk 实现excel中数据透视拖拽数据

176 阅读1分钟

需求要做网页版的excel系统,简单来说就是做二次封装echarts图表,但是要做成如下图所示右侧可以拖到数据的

image.png

我们系统目前统一使用angular框架,使用到拖拽所以结合了cdk,使用如下方法,但是transferArrayItem这个方法不能满足我们目前的需求,目前这个方法是从一个数组拖拽到另一个数组,而我们的需求是从一个数组复制到另一个数组

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,
      );
    }
  }

查阅文档没有解决方案,查看源码,发现了它的另一个方法:copyArrayItem(),用法和transferArrayItem一样,满足了我们的需求