vue实现模块拖拽

Vue 实现模块拖拽的方法

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，结合 Vue 的事件绑定可以轻松实现拖拽功能。以下是一个基本示例：

<template>
  <div 
    draggable="true" 
    @dragstart="handleDragStart" 
    @dragover.prevent 
    @drop="handleDrop"
  >
    拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
    },
    handleDrop(e) {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      const draggedElement = document.getElementById(data)
      e.target.appendChild(draggedElement)
    }
  }
}
</script>

使用第三方库 vue-draggable

对于更复杂的拖拽需求，可以使用专门为 Vue 设计的拖拽库 vue-draggable：

npm install vuedraggable

<template>
  <draggable v-model="items" group="modules">
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: '模块1' },
        { id: 2, name: '模块2' }
      ]
    }
  }
}
</script>

实现拖拽排序

要实现拖拽排序功能，可以结合 Vue 的响应式特性和拖拽事件：

<template>
  <div 
    v-for="(item, index) in list" 
    :key="item.id"
    draggable="true"
    @dragstart="dragStart(index)"
    @dragenter.prevent="dragEnter(index)"
    @dragend="dragEnd"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [...],
      draggingIndex: null
    }
  },
  methods: {
    dragStart(index) {
      this.draggingIndex = index
    },
    dragEnter(index) {
      if (this.draggingIndex !== null) {
        const item = this.list.splice(this.draggingIndex, 1)[0]
        this.list.splice(index, 0, item)
        this.draggingIndex = index
      }
    },
    dragEnd() {
      this.draggingIndex = null
    }
  }
}
</script>

拖拽状态样式控制

为了提升用户体验，可以为拖拽元素添加状态样式：

.draggable-item {
  transition: all 0.3s ease;
}
.draggable-item.dragging {
  opacity: 0.5;
  background: #f0f0f0;
}

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

跨组件拖拽实现

对于跨组件拖拽，可以使用 Vue 的事件总线或状态管理：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- 拖拽源组件 -->
<div 
  draggable 
  @dragstart="emitDragStart(data)"
></div>

<!-- 放置目标组件 -->
<div 
  @dragover.prevent 
  @drop="handleDrop"
></div>

methods: {
  emitDragStart(data) {
    EventBus.$emit('drag-start', data)
  },
  handleDrop() {
    EventBus.$emit('drop')
  }
}

以上方法可以根据具体需求选择使用，HTML5 API 适合简单场景，vue-draggable 适合复杂交互，自定义实现则提供了最大的灵活性。