当前位置：首页 > VUE

vue3拖拽实现

2026-02-22 21:56:38VUE

Vue3 拖拽实现方法

使用原生 HTML5 拖拽 API

HTML5 提供了原生的拖拽 API，通过 draggable 属性和相关事件实现基础拖拽功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    可拖拽元素
  </div>
  <div 
    @dragover="handleDragOver"
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

<script setup>
const handleDragStart = (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
};

const handleDragOver = (e) => {
  e.preventDefault();
};

const handleDrop = (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(data));
};
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，提供更高级的拖拽功能。

安装依赖：

vue3拖拽实现

npm install vuedraggable@next

基本用法：

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

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';

const list = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

const onDragEnd = () => {
  console.log('拖拽结束', list.value);
};
</script>

使用自定义指令实现拖拽

通过 Vue 的自定义指令功能可以封装更灵活的拖拽逻辑。

vue3拖拽实现

<template>
  <div v-draggable>自定义指令拖拽</div>
</template>

<script setup>
const vDraggable = {
  mounted(el) {
    el.draggable = true;
    el.style.cursor = 'move';

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', el.id);
    });
  }
};
</script>

拖拽排序实现

结合拖拽事件和数组操作可以实现列表排序功能。

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

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' }
]);

let draggedIndex = null;

const dragStart = (index) => {
  draggedIndex = index;
};

const dragOver = (index) => {
  if (draggedIndex !== index) {
    const draggedItem = items.value[draggedIndex];
    items.value.splice(draggedIndex, 1);
    items.value.splice(index, 0, draggedItem);
    draggedIndex = index;
  }
};

const drop = () => {
  draggedIndex = null;
};
</script>

跨组件拖拽实现

通过 Vue 的 provide/inject 或全局状态管理实现跨组件拖拽。

<!-- 父组件 -->
<template>
  <ComponentA />
  <ComponentB />
</template>

<script setup>
import { provide, ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const sharedState = ref(null);

provide('dragState', {
  sharedState,
  setDragItem: (item) => { sharedState.value = item; },
  clearDragItem: () => { sharedState.value = null; }
});
</script>

<!-- 子组件A -->
<template>
  <div 
    draggable
    @dragstart="handleDragStart(item)"
  >
    拖拽源
  </div>
</template>

<script setup>
const { setDragItem } = inject('dragState');

const handleDragStart = (item) => {
  setDragItem(item);
};
</script>

<!-- 子组件B -->
<template>
  <div 
    @dragover.prevent
    @drop="handleDrop"
  >
    放置目标
  </div>
</template>

<script setup>
const { sharedState, clearDragItem } = inject('dragState');

const handleDrop = () => {
  if (sharedState.value) {
    console.log('接收到的数据:', sharedState.value);
    clearDragItem();
  }
};
</script>