当前位置：首页 > VUE

vue拖拽实现页面

2026-01-18 17:54:48VUE

Vue拖拽实现页面的方法

使用HTML5原生拖拽API

HTML5提供了原生的拖拽API，可以通过draggable属性、dragstart、dragend、dragover和drop等事件实现拖拽功能。在Vue中，可以通过事件绑定和数据响应式更新实现拖拽。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDrop(index) {
      const draggedItem = this.items[this.draggedIndex]
      this.items.splice(this.draggedIndex, 1)
      this.items.splice(index, 0, draggedItem)
    }
  }
}
</script>

使用第三方库Vue.Draggable

Vue.Draggable是基于Sortable.js的Vue组件，提供了更简单的方式实现拖拽功能。安装后可以直接使用<draggable>组件。

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable v-model="items" @end="onDragEnd">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

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

自定义拖拽逻辑

如果需要更复杂的拖拽逻辑，可以结合鼠标事件（mousedown、mousemove、mouseup）实现自定义拖拽。通过计算元素位置和偏移量实现精确控制。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="draggable-item"
      @mousedown="startDrag(index, $event)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      dragging: false,
      currentIndex: null,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrag(index, event) {
      this.dragging = true
      this.currentIndex = index
      this.startX = event.clientX
      this.startY = event.clientY
      document.addEventListener('mousemove', this.handleDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    handleDrag(event) {
      if (!this.dragging) return
      const deltaX = event.clientX - this.startX
      const deltaY = event.clientY - this.startY
      // 实现拖拽逻辑
    },
    stopDrag() {
      this.dragging = false
      document.removeEventListener('mousemove', this.handleDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

拖拽排序与动画

结合Vue的过渡动画（<transition-group>）可以实现拖拽排序的平滑效果。适用于列表重新排序的场景。

<template>
  <div>
    <transition-group name="list" tag="div">
      <div 
        v-for="(item, index) in items" 
        :key="item.id"
        draggable="true"
        @dragstart="handleDragStart(index)"
        @dragover.prevent
        @drop="handleDrop(index)"
        class="item"
      >
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDrop(index) {
      const draggedItem = this.items[this.draggedIndex]
      this.items.splice(this.draggedIndex, 1)
      this.items.splice(index, 0, draggedItem)
    }
  }
}
</script>

<style>
.list-move {
  transition: transform 0.3s ease;
}
.item {
  margin: 5px;
  padding: 10px;
  background: #f0f0f0;
}
</style>

以上方法可以根据具体需求选择使用，从简单的原生API到复杂的自定义逻辑，Vue提供了多种方式实现拖拽功能。

vue拖拽实现页面