当前位置：首页 > VUE

基于Vue实现拖拽效果

2026-01-22 22:19:45VUE

使用原生HTML5拖拽API实现

在Vue中可以通过@dragstart、@dragover和@drop等事件实现基础拖拽功能。需要设置元素的draggable属性为true，并通过event.dataTransfer传递数据。

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

    <div 
      @dragover.prevent
      @drop="handleDrop"
    >放置区域</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '传输的数据')
    },
    handleDrop(e) {
      const data = e.dataTransfer.getData('text/plain')
      console.log('接收到的数据:', data)
    }
  }
}
</script>

使用第三方库vue-draggable

对于复杂场景推荐使用vue-draggable库，它基于Sortable.js封装，支持列表排序、跨列表拖拽等功能。

安装依赖：

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: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  }
}
</script>

实现自定义拖拽指令

通过Vue自定义指令可以实现更灵活的拖拽控制，适合需要特殊交互的场景。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true)

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('payload', binding.value)
    })
  }
})

// 使用方式
<div v-drag="itemData">拖拽我</div>

处理拖拽样式反馈

在拖拽过程中通常需要视觉反馈，可以通过CSS类名切换实现状态变化。

.dragging {
  opacity: 0.5;
  border: 2px dashed #666;
}

.drop-zone {
  min-height: 100px;
  transition: background 0.3s;
}

.drop-zone.active {
  background: #f0f0f0;
}

配合Vue的class绑定：

<div 
  :class="{ 'dragging': isDragging }"
  @dragstart="isDragging = true"
  @dragend="isDragging = false"
></div>

跨组件拖拽通信

当拖拽涉及多个组件时，推荐使用Vuex或事件总线管理状态。

基于Vue实现拖拽效果

// 在Vuex中定义状态
state: {
  draggedItem: null,
  dropZones: []
}

// 组件中提交mutation
methods: {
  handleDragStart(item) {
    this.$store.commit('SET_DRAGGED_ITEM', item)
  }
}