Vue + Fabric.js canvas 组件的拖拽

Vue 代码示例

思路：

1. 首先需要定义一个临时变量 tempSrc， 用来存储每次拖拽图片的 src 地址
2. 监听每个 img 的拖拽事件，将拖拽 target 的 src 存到 临时变量 tempSrc 中
3. 监听 canvas 的拖拽事件，将 tempSrc 添加到 canvas 中

伪代码：

  private handleDragEnter(e) {
    // console.log("handleDragEnter:", e);
    this.$emit("update:currDropImgUrl", e.target.currentSrc);
  }

 // canvas 监听画布拖拽事件
this.canvas.on("drop", (options: any) => {
    console.log("drop：", options);
   console.log("currDropImgUrl:", this.currDropImgUrl);
   this.addImage({
        file_url: this.currDropImgUrl,
        angle: 0,
        opacity: 1,
        left: options.e.offsetX, // 图片相对画布的左侧距离
        top: options.e.offsetY, // 图片相对画布的顶部距离
    });
 });

参考链接：
[Drag and Drop into Fabric.js canvas](fabricjs - Drag and Drop into Fabric.js canvas - Stack Overflow
)