当前位置：首页 > VUE

vue 中实现拖拽

2026-03-28 14:35:10VUE

实现拖拽功能的基本方法

在 Vue 中实现拖拽功能可以通过原生 HTML5 的拖拽 API 或第三方库（如 vuedraggable）完成。以下是两种常见实现方式：

使用 HTML5 拖拽 API

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragover.prevent="handleDragOver"
    @drop="handleDrop"
  >
    拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      e.target.appendChild(document.getElementById(data));
    }
  }
}
</script>

使用 vuedraggable 库

npm install vuedraggable

<template>
  <draggable v-model="items" @end="onDragEnd">
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    }
  }
};
</script>

进阶拖拽功能实现

跨组件拖拽 通过 Vuex 或事件总线管理拖拽状态，确保不同组件间能共享拖拽数据。

vue 中实现拖拽

拖拽动画优化 添加 CSS 过渡效果提升用户体验：

.drag-item {
  transition: transform 0.2s ease;
}
.drag-ghost {
  opacity: 0.5;
}

拖拽限制条件 通过判断条件实现部分元素不可拖拽：

vue 中实现拖拽

<draggable :move="checkMove">
  <!-- 子元素 -->
</draggable>

<script>
methods: {
  checkMove(evt) {
    return evt.relatedContext.element.locked !== true;
  }
}
</script>

性能优化建议

对于大型列表，使用 Virtual Scrolling 技术避免渲染所有元素。可通过 vue-virtual-scroller 等库实现。

拖拽事件建议使用防抖/节流处理高频触发的事件：

import { throttle } from 'lodash';
methods: {
  handleDrag: throttle(function(e) {
    // 处理逻辑
  }, 100)
}

移动端适配

触摸事件需要特殊处理，推荐使用支持移动端的库如 interact.js：

import interact from 'interactjs';
mounted() {
  interact('.drag-item').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);
    }
  });
}