使用vue3+draggable实现元素的拖拽、缩放

在使用draggable的时候遇到了一些问题 好在最终解决了 记录下希望能帮助到有缘人

页面功能 可实现模块的放大缩小以及位置的更换 同时echarts会跟着父元素大小而变化，有兴趣者自己研究吧 代码放在下面了 直接cv就好 不难 但是有些细节要注意 比如draggable需要绑定唯一的key值否则改变元素样式时会出问题 以及echarts跟随父盒子自适应需要在echarts中配置grid属性并结合window的监听事件去实现

<template>
  <div class="itxst">
    <div class="group">
      <draggable
        v-model="group"
        ghost-class="ghost"
        handle=".move"
        filter=".forbid"
        :force-fallback="true"
        chosen-class="chosenClass"
        animation="300"
        @start="onStart"
        @end="onEnd"
        group="group1"
        :fallback-class="true"
        :fallback-on-body="true"
        :touch-start-thresh