当前位置：首页 > VUE

vue如何实现拖拽功能

2026-02-24 07:33:05VUE

Vue实现拖拽功能的方法

使用HTML5原生拖拽API结合Vue实现基础拖拽功能。HTML5提供了draggable属性以及dragstart、dragend等事件，Vue可以通过事件绑定直接使用。

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

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '自定义数据');
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

使用第三方库实现高级拖拽

推荐使用vuedraggable库，基于Sortable.js封装，适用于列表排序、跨容器拖拽等复杂场景。安装命令如下：

npm install vuedraggable

基础列表拖拽示例：

vue如何实现拖拽功能

<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: '项目A' },
        { id: 2, name: '项目B' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('新顺序:', this.list);
    }
  }
}
</script>

实现自定义拖拽视觉效果

通过CSS和事件结合实现拖拽过程中的样式变化，提升用户体验。

.draggable-item {
  transition: transform 0.2s;
}
.dragging {
  opacity: 0.5;
  transform: scale(1.05);
}

配合Vue实现动态类名：

vue如何实现拖拽功能

<div 
  :class="{ 'dragging': isDragging }"
  @dragstart="isDragging = true"
  @dragend="isDragging = false"
>
  拖拽时会变透明的元素
</div>

跨组件/跨页面拖拽实现

使用Vuex或Event Bus管理拖拽状态，配合dataTransfer实现跨组件数据传递。

// 在拖拽源组件中
handleDragStart(e) {
  this.$store.commit('setDraggedItem', this.item);
}

// 在目标组件中
handleDrop(e) {
  const item = this.$store.state.draggedItem;
  this.$store.commit('addItem', item);
}

移动端拖拽适配方案

移动端需处理touch事件，推荐使用hammer.js或interact.js库。例如使用interact.js：

import interact from 'interactjs';

export default {
  mounted() {
    interact('.draggable').draggable({
      onmove: (event) => {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    });
  }
}