vue封装组件实现拖拽效果

实例

<template>
  <div class="drag-container">
    <div class="drag-item" ref="dragItem" :style="{ top: top + 'px', left: left + 'px' }" @mousedown="startDrag">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false, // 是否正在拖拽
      startX: 0, // 拖拽开始时的鼠标x坐标
      startY: 0, // 拖拽开始时的鼠标y坐标
      left: 0, // 拖拽元素的left值
      top: 0 // 拖拽元素的top值
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX
      this.startY = e.clientY
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.endDrag)
    },
    drag(e) {
      if (this.isDragging) {
        const dx = e.clientX - this.startX
        const dy = e.clientY - this.startY
        this.left += dx
        this.top += dy
        this.startX = e.clientX
        this.startY = e.clientY
      }
    },
    endDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.endDrag)
    }
  }
}
</script>

<style scoped>
.drag-container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.drag-item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #409eff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

使用该组件时，需要将拖拽元素放在组件内部的中：

<template>
  <div class="demo">
    <Draggable>
      <div>拖拽我</div>
    </Draggable>
  </div>
</template>

<script>
import Draggable from './Draggable.vue'

export default {
  components: {
    Draggable
  }
}
</script>