当前位置：首页 > VUE

vue实现拖动效果

2026-01-18 04:26:16VUE

使用 `vuedraggable` 库实现拖动

vuedraggable 是基于 Sortable.js 的 Vue 组件库，提供简单易用的拖拽功能。安装方式如下：

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' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖动后的顺序:', this.list);
    }
  }
};
</script>

原生 HTML5 拖放 API

通过 HTML5 的 draggable 属性和事件实现基础拖放：

vue实现拖动效果

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    draggable="true"
    @dragstart="handleDragStart($event, item)"
    @dragover.prevent
    @drop="handleDrop($event, item)"
  >
    {{ item.text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Drag me' },
        { id: 2, text: 'Drop here' }
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item;
      e.dataTransfer.effectAllowed = 'move';
    },
    handleDrop(e, targetItem) {
      if (this.draggedItem !== targetItem) {
        const fromIndex = this.items.indexOf(this.draggedItem);
        const toIndex = this.items.indexOf(targetItem);
        this.items.splice(fromIndex, 1);
        this.items.splice(toIndex, 0, this.draggedItem);
      }
    }
  }
};
</script>

自定义拖动动画

结合 CSS 过渡效果增强交互体验：

.drag-item {
  transition: transform 0.2s ease;
  cursor: grab;
}
.drag-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

跨组件拖动

通过 Vuex 或事件总线实现跨组件数据同步：

vue实现拖动效果

// 在拖动事件中提交 mutation
this.$store.commit('updateList', newList);

移动端适配

对于触摸设备需添加 touch 事件支持：

@touchstart="handleTouchStart"
@touchmove="handleTouchMove"

性能优化

大数据量列表建议使用虚拟滚动：

<draggable v-model="list" :options="{ animation: 150 }">
  <virtual-list :size="50" :remain="8">
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </virtual-list>
</draggable>