vue拖拽实现管理后台

Vue 拖拽实现管理后台方案

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 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: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('排序后的数据:', this.list)
    }
  }
}
</script>

实现卡片自由拖拽

对于自由布局拖拽，可使用 interact.js 或原生 HTML5 Drag and Drop API：

<template>
  <div 
    v-for="item in items"
    :key="item.id"
    class="draggable-item"
    :style="{ left: item.x + 'px', top: item.y + 'px' }"
    @mousedown="startDrag(item, $event)"
  >{{ item.text }}</div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, x: 10, y: 10, text: 'Card 1' },
        { id: 2, x: 100, y: 100, text: 'Card 2' }
      ],
      activeItem: null,
      offsetX: 0,
      offsetY: 0
    }
  },
  methods: {
    startDrag(item, e) {
      this.activeItem = item
      this.offsetX = e.clientX - item.x
      this.offsetY = e.clientY - item.y
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    drag(e) {
      if (this.activeItem) {
        this.activeItem.x = e.clientX - this.offsetX
        this.activeItem.y = e.clientY - this.offsetY
      }
    },
    stopDrag() {
      this.activeItem = null
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

<style>
.draggable-item {
  position: absolute;
  cursor: move;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
}
</style>

结合 Element UI 表格拖拽

对于 Element UI 表格行拖拽排序：

<template>
  <el-table :data="tableData" row-key="id">
    <el-table-column prop="name" label="Name"></el-table-column>
    <draggable v-model="tableData" tag="tbody" @end="handleDragEnd">
      <tr v-for="(row, index) in tableData" :key="row.id">
        <td>{{ row.name }}</td>
      </tr>
    </draggable>
  </el-table>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      tableData: [
        { id: 1, name: 'Row 1' },
        { id: 2, name: 'Row 2' }
      ]
    }
  },
  methods: {
    handleDragEnd() {
      // 更新服务器数据
    }
  }
}
</script>

拖拽与 Vuex 状态管理

当项目使用 Vuex 时，需要通过 mutations 更新状态：

// store.js
mutations: {
  updateItemsOrder(state, newItems) {
    state.items = newItems
  }
}

// 组件内
methods: {
  onDragEnd() {
    this.$store.commit('updateItemsOrder', this.list)
  }
}

性能优化建议

对于大型列表，添加 animation: 150 属性可改善拖拽动画效果。限制拖拽区域时，可设置 handle 属性指定拖拽手柄：

<draggable 
  v-model="list" 
  :animation="150"
  handle=".drag-handle"
>
  <div v-for="item in list" :key="item.id">
    <span class="drag-handle">≡</span>
    {{ item.name }}
  </div>
</draggable>

跨组件拖拽实现

通过事件总线或 Vuex 实现跨组件数据传递：

// Event Bus 方式
const bus = new Vue()
bus.$emit('item-dropped', payload)

// 接收组件
bus.$on('item-dropped', payload => {
  // 处理数据
})

移动端适配

添加 touchstart、touchmove 事件处理，或使用支持触摸事件的库如 interact.js。注意添加 CSS 属性避免触摸延迟：

.draggable-item {
  touch-action: none;
}