vue3 拖拽 + 缩放

    <!-- 中间图片 -->
    <div class="new_group_content" :class="{ only_edit: !showControl }">
      <el-scrollbar always>
        <div @wheel="handleWeel" :style="`transform: scale(${zoom});position:absolute; top:${elLeft}px;left:${elTop}px`" draggable="true"
          class="handleWeel-box" @dragstart="dragstart" @dragend="dragend">
          <canvas id="canvas" width="960" height="640" class="canvas_box"></canvas>
        </div>
      </el-scrollbar>
    </div>

	```

```js


// // 滚轮放大缩小事件
const zoom = ref(1);
const handleWeel = (e: any) => {
  console.log(e);
  if (e.wheelDelta < 0) {
    zoom.value -= 0.05;
  } else {
    zoom.value += 0.05;
  }
  console.log(zoom.value);

  if (zoom.value <= 0.2) {
    zoom.value = 0.2;
  } else if (zoom.value >= 2) {
    zoom.value = 2;
  }
};

const elLeft = ref<number>(0); // 元素的左偏移量
const elTop = ref<number>(0); // 元素的右偏移量
const start_posationX = ref<number>(0); //拖拽之前的位置 x
const start_posationY = ref<number>(0); //拖拽之前的位置 y

// 拖动事件的开始
const dragstart = (e: any) => {
  console.log(e);
  console.log(e.clientX);
  console.log(e.clientY);

  start_posationX.value = e.clientX;
  start_posationY.value = e.clientY;
};


// 拖动事件的结束
const dragend = (e: any) => {
  console.log(e);
  console.log(e.clientX);
  console.log(e.clientY);


  elTop.value += e.clientX - start_posationX.value;
  elLeft.value += e.clientY - start_posationY.value;


  console.log(elLeft.value);
  console.log(elTop.value);
};

//将div变为可拖放容器  解决拖拽时的显示红色禁止图标
const dragenter = () => {
  var outer: any = document.getElementsByClassName("videoNull");
  outer = Array.from(outer);
  outer.forEach(function (item: any) {
    item.ondragover = dragover;
  });
  function dragover(event: any) {
    // 阻止默认行为，变成可放置的
    event.preventDefault();
  }
};


onMounted(() => {
  dragenter()
})