• 地址：https://juejin.cn/post/6908502083075325959
• 思路
  • 组件栏
    • 维护 componentList 组件列表库
  • 画布
    • componentData 维护已在画布中渲染了的组件
  • <component :is=""> 动态组件渲染不同类型组件
  • 给元素设置 draggable 属性让其可以拖拽
    • dragstart 拖拽开始事件
      • dataTransfer.setData() 设置是选中的 componoentList 中的哪个组件
    • drop 拖拽结束事件
      • dataTransfer.getData() 拿到选中 index，从 componentList 中查出组件
  • 画布中拖拽组件
    • 画布相对定位，组件绝对定位
    • 监听 mousedown 、mousemove 、mouseup 拖拽组件