当前位置：首页 > VUE

vue实现拖动div

2026-01-19 01:44:03VUE

实现拖动 div 的基本思路

在 Vue 中实现拖动 div 的功能，可以通过监听鼠标事件（mousedown、mousemove、mouseup）来动态更新元素的位置。核心逻辑是记录初始点击位置，计算移动偏移量，并更新元素的 transform 或 left/top 样式。

使用原生事件实现拖动

创建一个可拖动的 div，通过 Vue 的指令或方法绑定事件。

<template>
  <div
    ref="draggable"
    class="draggable"
    @mousedown="startDrag"
    :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
  >
    拖动我
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 },
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startPos = {
        x: e.clientX - this.position.x,
        y: e.clientY - this.position.y,
      };
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    drag(e) {
      if (!this.isDragging) return;
      this.position = {
        x: e.clientX - this.startPos.x,
        y: e.clientY - this.startPos.y,
      };
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
  },
};
</script>

<style>
.draggable {
  width: 100px;
  height: 100px;
  background: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  position: absolute;
}
</style>

使用第三方库实现拖动

如果需要更复杂的功能（如边界限制、拖拽手柄），可以使用第三方库如 vuedraggable 或 draggable-vue-directive。

安装 `vuedraggable`

npm install vuedraggable

示例代码

<template>
  <draggable v-model="list" @start="dragStart" @end="dragEnd">
    <div v-for="item in list" :key="item.id" class="draggable-item">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
  methods: {
    dragStart() {
      console.log('拖动开始');
    },
    dragEnd() {
      console.log('拖动结束');
    },
  },
};
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

边界限制与优化

如果需要限制拖动范围，可以在 drag 方法中添加边界判断逻辑。

drag(e) {
  if (!this.isDragging) return;
  const maxX = window.innerWidth - this.$refs.draggable.offsetWidth;
  const maxY = window.innerHeight - this.$refs.draggable.offsetHeight;
  this.position = {
    x: Math.min(maxX, Math.max(0, e.clientX - this.startPos.x)),
    y: Math.min(maxY, Math.max(0, e.clientY - this.startPos.y)),
  };
}

触摸事件支持

为了支持移动端触摸事件，可以添加 touchstart、touchmove 和 touchend 事件。

startDrag(e) {
  const clientX = e.clientX ?? e.touches[0].clientX;
  const clientY = e.clientY ?? e.touches[0].clientY;
  this.isDragging = true;
  this.startPos = {
    x: clientX - this.position.x,
    y: clientY - this.position.y,
  };
  document.addEventListener('mousemove', this.drag);
  document.addEventListener('touchmove', this.drag);
  document.addEventListener('mouseup', this.stopDrag);
  document.addEventListener('touchend', this.stopDrag);
}