当前位置：首页 > VUE

vue 实现拖动

2026-01-07 19:53:15VUE

Vue 实现拖动的几种方法

在Vue中实现拖动功能可以通过多种方式，包括原生HTML5的拖放API、第三方库如vuedraggable等。以下是几种常见的实现方法：

使用HTML5拖放API

HTML5提供了原生的拖放API，可以通过Vue的事件绑定来实现拖动功能。这种方法不需要额外的库，适合简单的拖动需求。

<template>
  <div
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖动元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
    },
    handleDragEnd(event) {
      console.log('拖动结束');
    }
  }
};
</script>

使用vuedraggable库

vuedraggable是一个基于Sortable.js的Vue组件，提供了丰富的拖动功能，适合复杂的拖动场景。

安装vuedraggable：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="list" @end="onDragEnd">
    <div v-for="item in list" :key="item.id">
      {{ 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' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖动结束', this.list);
    }
  }
};
</script>

使用自定义拖动逻辑

如果需要更灵活的拖动逻辑，可以通过监听鼠标事件来实现自定义拖动功能。

<template>
  <div
    ref="draggable"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    拖动元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 }
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startPos = {
        x: event.clientX - this.position.x,
        y: event.clientY - this.position.y
      };
    },
    onDrag(event) {
      if (!this.isDragging) return;
      this.position = {
        x: event.clientX - this.startPos.x,
        y: event.clientY - this.startPos.y
      };
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>

使用第三方库如interact.js

interact.js是一个强大的拖动库，支持复杂的拖动、缩放和手势操作。

安装interact.js：

npm install interactjs

使用示例：

<template>
  <div ref="draggable" class="draggable">
    拖动元素
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  mounted() {
    interact(this.$refs.draggable).draggable({
      onmove: (event) => {
        const target = event.target;
        const x = (parseFloat(target.style.left) || 0) + event.dx;
        const y = (parseFloat(target.style.top) || 0) + event.dy;
        target.style.left = `${x}px`;
        target.style.top = `${y}px`;
      }
    });
  }
};
</script>

使用Vue的transition-group实现拖动动画

如果需要拖动时带有动画效果，可以结合Vue的transition-group组件和vuedraggable实现。

<template>
  <draggable v-model="list" tag="transition-group">
    <div v-for="item in list" :key="item.id" class="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' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

<style>
.item {
  transition: all 0.5s;
}
</style>

以上方法可以根据具体需求选择适合的方式实现拖动功能。

vue 实现拖动