DIV 如何实现拖拽，缩放功能

先上图

1.首先实现拖拽功能

监听mousedown 事件

  <div class="main">
    <div :style="`transform:translate(${x}px,${y}px)`">
      <div class="draggable" @mousedown="startDrag">
        <div class="content">这是一个可拖拽的div</div>
      </div>
    </div>
    {{ x }},{{ y }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0, // 元素的左偏移量
      y: 0, // 元素的右偏移量
      isDragging: false, // 是否拖拽
      mouseX: 0, // 元素拖拽前距离浏览器的X轴位置
      mouseY: 0, //元素拖拽前距离浏览器的Y轴位置
      maxX: 70, // 设置 x 轴拖拽范围
      maxY: 70, // 设置 y 轴拖拽范围
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.mouseX = event.clientX - this.x;
      this.mouseY = event.clientY - this.y;
      window.addEventListener("mousemove", this.handleDrag);
      window.addEventListener("mouseup", this.stopDrag);
    },
    handleDrag(event) {
      if (this.isDragging) {
        this.x = event.clientX - this.mouseX;
        if (this.x > this.maxX) {
          this.x = this.maxX;
        } else if (this.x < -30) {
          this.x = -30;
        }
        this.y = event.clientY - this.mouseY;
        if (this.y > this.maxY) {
          this.y = this.maxY;
        } else if (this.y < -30) {
          this.y = -30;
        }
      }
    },
    stopDrag() {
      this.isDragging = false;
      window.removeEventListener("mousemove", this.handleDrag);
      window.removeEventListener("mouseup", this.stopDrag);
    },
  },
};
</script>

<style scoped>
.main {
  padding: 30px;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px;
}
.draggable {
  position: absolute;
  overflow: hidden; /* 防止内容溢出 */
  width: 100px;
  height: 100px;
}

.content {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.349);
  color: #fff;
}
</style>

此时就实现代码拖拽功能

2.监听wheel事件，通过scale来实现div的缩放功能，参考MDN滚轮缩放demo

<template>
  <div class="main">
    <div :style="`transform:translate(${x}px,${y}px)`">
      <div
        class="draggable"
        :style="`transform:scale(${scale})`"
        @mousedown="startDrag"
        @wheel="onWheel"
      >
        <div class="content">这是一个可拖拽缩放的div</div>
      </div>
    </div>
    {{ x }},{{ y }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0, // 元素的左偏移量
      y: 0, // 元素的右偏移量
      isDragging: false, // 是否拖拽
      mouseX: 0, // 元素拖拽前距离浏览器的X轴位置
      mouseY: 0, //元素拖拽前距离浏览器的Y轴位置
      scale: 1, // 缩放比例
      maxX: 70, // 设置 x 轴拖拽范围
      maxY: 70, // 设置 y 轴拖拽范围
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.mouseX = event.clientX - this.x;
      this.mouseY = event.clientY - this.y;
      window.addEventListener("mousemove", this.handleDrag);
      window.addEventListener("mouseup", this.stopDrag);
    },
    handleDrag(event) {
      if (this.isDragging) {
        this.x = event.clientX - this.mouseX;
        if (this.x > this.maxX) {
          this.x = this.maxX;
        } else if (this.x < -30) {
          this.x = -30;
        }
        this.y = event.clientY - this.mouseY;
        if (this.y > this.maxY) {
          this.y = this.maxY;
        } else if (this.y < -30) {
          this.y = -30;
        }
      }
    },
    stopDrag() {
      this.isDragging = false;
      window.removeEventListener("mousemove", this.handleDrag);
      window.removeEventListener("mouseup", this.stopDrag);
    },

    onWheel(event) {
      event.preventDefault();
      this.scale += event.deltaY * -0.01;
      //缩放范围 0.5-2
      this.scale = Math.min(Math.max(0.5, this.scale), 2);
    },
  },
};
</script>

<style scoped>
.main {
  padding: 30px;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px;
}
.draggable {
  position: absolute;
  overflow: hidden; /* 防止内容溢出 */
  width: 100px;
  height: 100px;
}

.content {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.349);
  color: #fff;
}
</style>

至此就实现缩放，拖拽功能