vue3滚动滑轮 点击拖拽 事件以及方法

    <div
      :style="`padding: 30px  0px;position:absolute; top:${elLeft}px;left:${elTop}px; width:${box_width}px;height:${box_height}px`"
      draggable="true" @dragstart="dragstart" @dragend="dragend" ref="box_canvas_drag" id="print" @click.self="bg_click"
      @mousedown="mouse_down" @mousemove="mouse_move" @mouseup="mouse_up">


      <div class="canvas_box" ref="canvasRefs" :class="{ only_edit: !showControl }" @wheel.prevent="handleWeel"
        :style="`transform: scale(${zoom}) rotate(${box_rotate}deg); transformOrigin: ${mouseX}px ${mouseY}px ; width:${box_width}px;height:${box_height}px`"
        id="print_box">
        <canvas id="canvas" :style="` width:${box_width + 100}px;height:${box_height + 100}px`"></canvas>
      </div>


    </div>

// // 滚轮放大缩小事件
const zoom = ref(0.55);
// 鼠标的位置
const mouseX = ref(0)
const mouseY = ref(0)
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;
  }

  let boundingRect = canvasRefs.value.getBoundingClientRect()

  mouseX.value = e.clientX - boundingRect.left;
  mouseY.value = e.clientY - boundingRect.top;


  pinia_zoom.value = zoom.value
};

// 鼠标滚轮事件 鼠标按下事件
const mouse_down = (e) => {
  console.log(e);
  if (e.button == 1) {
    mouse_down_flag.value = true

  }
}
// 鼠标抬起事件
const mouse_up = (e) => {
  if (e.button == 1) {
    mouse_down_flag.value = false
  }
}
const mouse_down_flag = ref(false)

// 鼠标移动事件
const mouse_move = (e) => {
  if (mouse_down_flag.value == true) {
    console.log(e);
    elLeft.value += e.movementY
    elTop.value += e.movementX
  }

}

const elLeft = ref<number>(-675); // 元素的左偏移量
const elTop = ref<number>(-310); // 元素的右偏移量
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 = async (e: any) => {
  if (click_direction.value == false) {
    elTop.value += (e.clientX * 1) - (1 * start_posationX.value);
    elLeft.value += (e.clientY * 1) - (1 * start_posationY.value);
  } else {
    elTop.value += (e.clientX * 1) - (1 * start_posationX.value);
    elLeft.value += (e.clientY * 1) - (1 * start_posationY.value);
    // 定时器  异步调用盒子的位置
    setTimeout(() => {
      project_click(click_id.value);
    }, 1);
  }
};

//将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();
  }
};