当前位置：首页 > VUE

vue实现拖动功能

2026-01-18 20:23:49VUE

使用HTML5拖放API实现基础拖动

Vue中可以通过HTML5原生拖放API实现基础拖动功能。在元素上添加draggable="true"属性使其可拖动，通过@dragstart事件设置被拖拽数据。

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

  <div 
    @dragover.prevent
    @drop="handleDrop"
  >放置区域</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>

使用vuedraggable库实现列表排序

对于复杂的列表拖拽排序，推荐使用vuedraggable库。安装后通过组件化方式实现优雅的拖拽排序功能。

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: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('排序后的列表:', this.list)
    }
  }
}
</script>

实现自定义拖拽手柄

有时需要限制只有特定区域可触发拖拽。通过handle属性指定拖拽手柄的选择器。

vue实现拖动功能

<template>
  <draggable 
    v-model="items"
    handle=".handle"
  >
    <div v-for="item in items" :key="item.id">
      <span class="handle">≡</span>
      {{ item.text }}
    </div>
  </draggable>
</template>

<style>
.handle {
  cursor: move;
  margin-right: 10px;
}
</style>

跨组件拖拽实现

对于跨组件的拖拽场景，可以使用Vue的provide/inject或全局状态管理。这里展示使用事件总线的简单实现。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- 拖拽源组件 -->
<template>
  <div 
    draggable
    @dragstart="emitDragStart"
  >源元素</div>
</template>

<script>
import { EventBus } from './event-bus'
export default {
  methods: {
    emitDragStart() {
      EventBus.$emit('drag-start', { data: 'payload' })
    }
  }
}
</script>

<!-- 放置目标组件 -->
<template>
  <div @drop="handleDrop">目标区域</div>
</template>

<script>
import { EventBus } from './event-bus'
export default {
  created() {
    EventBus.$on('drag-start', this.handleDragStart)
  },
  methods: {
    handleDrop() {
      // 处理放置逻辑
    }
  }
}
</script>

拖拽过程中的样式控制

通过拖拽事件和动态class实现拖拽过程中的视觉反馈效果。

<template>
  <div
    :class="{ 'dragging': isDragging }"
    draggable
    @dragstart="isDragging = true"
    @dragend="isDragging = false"
  >可拖拽元素</div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false
    }
  }
}
</script>

<style>
.dragging {
  opacity: 0.5;
  border: 2px dashed #42b983;
}
</style>