vue drag resize

// Vue Drag Resize 示例代码

<template>
  <div id="app">
    <div 
      class="resize-drag" 
      :style="{
        width: width + 'px',
        height: height + 'px',
        transform: `translate(${x}px, ${y}px)`
      }"
      @mousedown="startDrag"
      ref="resizeDrag"
    >
      <!-- 拖拽手柄 -->
      <div class="drag-handle" @mousedown.stop="startResize"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      isDragging: false,
      isResizing: false,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.clientX - this.x;
      this.startY = event.clientY - this.y;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (this.isDragging) {
        this.x = event.clientX - this.startX;
        this.y = event.clientY - this.startY;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    startResize(event) {
      this.isResizing = true;
      this.startWidth = this.width;
      this.startHeight = this.height;
      this.startX = event.clientX;
      this.startY = event.clientY;
      document.addEventListener('mousemove', this.onResize);
      document.addEventListener('mouseup', this.stopResize);
    },
    onResize(event) {
      if (this.isResizing) {
        this.width = this.startWidth + (event.clientX - this.startX);
        this.height = this.startHeight + (event.clientY - this.startY);
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.onResize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

<style>
#app {
  position: relative;
  width: 100%;
  height: 100vh;
}

.resize-drag {
  position: absolute;
  background-color: lightblue;
  border: 1px solid blue;
  cursor: move;
}

.drag-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
  cursor: se-resize;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 创建了一个可拖拽和调整大小的 div 元素。
  • 使用 :style 绑定动态样式，根据 x, y, width, 和 height 数据属性来设置元素的位置和大小。
  • 添加了一个拖拽手柄（drag-handle），用于触发调整大小的操作。

• 脚本部分 (<script>):

  • 定义了数据属性 x, y, width, height 来控制元素的位置和大小。
  • 实现了 startDrag, onDrag, stopDrag 方法来处理拖拽操作。
  • 实现了 startResize, onResize, stopResize 方法来处理调整大小的操作。

• 样式部分 (<style>):

  • 设置了 resize-drag 的样式，使其可以被拖动。
  • 设置了 drag-handle 的样式，使其看起来像一个调整大小的手柄，并且鼠标悬停时显示为调整大小的光标。