当前位置：首页 > VUE

vue实现组件拖动

2026-03-09 17:36:17VUE

实现组件拖动的核心方法

使用HTML5的拖放API结合Vue的事件绑定实现基础拖动功能。在Vue组件中通过draggable属性和事件监听器控制拖动行为。

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

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', this.itemId)
      e.target.classList.add('dragging')
    },
    handleDragEnd(e) {
      e.target.classList.remove('dragging')
    }
  }
}
</script>

<style>
.draggable-item {
  cursor: move;
  user-select: none;
}
.dragging {
  opacity: 0.5;
}
</style>

使用第三方库实现高级功能

对于复杂场景推荐使用vuedraggable库，该库基于Sortable.js封装，支持列表排序、跨容器拖动等功能。

安装依赖：

vue实现组件拖动

npm install vuedraggable

示例实现列表拖动排序：

<template>
  <draggable 
    v-model="list"
    group="items"
    @start="dragStart"
    @end="dragEnd"
  >
    <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' }
      ]
    }
  }
}
</script>

处理边界情况的注意事项

拖动过程中需要处理元素位置限制，防止拖出可视区域。通过计算鼠标位置和元素尺寸实现边界检测。

vue实现组件拖动

methods: {
  handleDrag(e) {
    const rect = this.$el.getBoundingClientRect()
    const maxX = window.innerWidth - rect.width
    const maxY = window.innerHeight - rect.height

    this.posX = Math.min(maxX, Math.max(0, e.clientX))
    this.posY = Math.min(maxY, Math.max(0, e.clientY))
  }
}

性能优化策略

对于大量可拖动元素的情况，采用虚拟滚动技术减少DOM操作。使用vue-virtual-scroller等库优化渲染性能。

<template>
  <RecycleScroller
    :items="largeList"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <draggable-item :item="item" />
    </template>
  </RecycleScroller>
</template>

移动端适配方案

针对触摸设备添加touchstart、touchmove事件支持，注意处理默认行为防止页面滚动。

handleTouchStart(e) {
  this.startX = e.touches[0].clientX
  this.startY = e.touches[0].clientY
  e.preventDefault()
},
handleTouchMove(e) {
  const dx = e.touches[0].clientX - this.startX
  const dy = e.touches[0].clientY - this.startY
  this.$el.style.transform = `translate(${dx}px, ${dy}px)`
}