当前位置：首页 > VUE

vue实现导航拖拽

2026-02-19 15:15:18VUE

Vue 实现导航拖拽

实现导航拖拽功能可以通过 Vue 的指令结合 HTML5 的拖放 API 完成。以下是一个完整的实现方案：

使用 Vue 指令封装拖拽功能

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

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', binding.value)
      e.dataTransfer.effectAllowed = 'move'
      el.style.opacity = '0.4'
    })

    el.addEventListener('dragend', () => {
      el.style.opacity = '1'
    })
  }
})

Vue.directive('drop', {
  bind(el, binding) {
    el.addEventListener('dragover', (e) => {
      e.preventDefault()
      e.dataTransfer.dropEffect = 'move'
    })

    el.addEventListener('drop', (e) => {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      binding.value(data)
    })
  }
})

组件中使用拖拽指令

<template>
  <div class="nav-container">
    <div 
      v-for="(item, index) in navItems" 
      :key="index"
      v-drag="index"
      @click="selectItem(index)"
      class="nav-item"
    >
      {{ item.name }}
    </div>

    <div 
      v-drop="handleDrop"
      class="drop-area"
    >
      拖拽到此处重新排序
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页' },
        { name: '产品' },
        { name: '服务' },
        { name: '关于' }
      ]
    }
  },
  methods: {
    handleDrop(dragIndex) {
      const dropIndex = this.navItems.length
      const draggedItem = this.navItems[dragIndex]

      this.navItems.splice(dragIndex, 1)
      this.navItems.splice(dropIndex, 0, draggedItem)
    },
    selectItem(index) {
      console.log('选中:', this.navItems[index].name)
    }
  }
}
</script>

<style>
.nav-container {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.nav-item {
  padding: 10px 15px;
  background: #eee;
  cursor: move;
  user-select: none;
}

.drop-area {
  padding: 20px;
  background: #f5f5f5;
  border: 2px dashed #ccc;
  margin-top: 20px;
}
</style>

实现导航项相互拖拽排序

如果需要实现导航项之间的相互拖拽排序，可以修改 drop 处理逻辑：

methods: {
  handleDrop(dragIndex, dropIndex) {
    const draggedItem = this.navItems[dragIndex]
    this.navItems.splice(dragIndex, 1)
    this.navItems.splice(dropIndex, 0, draggedItem)
  }
}

对应的模板修改为：

<div 
  v-for="(item, index) in navItems" 
  :key="index"
  v-drag="index"
  v-drop="(dragIndex) => handleDrop(dragIndex, index)"
  class="nav-item"
>
  {{ item.name }}
</div>

使用第三方库实现高级拖拽

对于更复杂的拖拽需求，可以考虑使用以下 Vue 拖拽库：

Vue.Draggable：基于 Sortable.js 的 Vue 组件

npm install vuedraggable

使用示例：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return { navItems: [...] }
  },
  methods: {
    onDragEnd() {
      console.log('新顺序:', this.navItems)
    }
  }
}
</script>

Vue-Smooth-Dnd：提供流畅的拖拽动画效果
Vue-Drag-Resize：支持拖拽和调整大小

移动端触摸支持

对于移动端设备，需要添加触摸事件支持：

vue实现导航拖拽

Vue.directive('drag', {
  bind(el, binding) {
    let startX, startY

    el.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX
      startY = e.touches[0].clientY
    })

    el.addEventListener('touchmove', (e) => {
      const moveX = e.touches[0].clientX - startX
      const moveY = e.touches[0].clientY - startY
      if (Math.abs(moveX) > 10 || Math.abs(moveY) > 10) {
        // 触发拖拽逻辑
      }
    })
  }
})