vue实现模块拖拽

Vue 实现模块拖拽的方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 等事件实现拖拽功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
    @dragover.prevent
    @drop="handleDrop"
  >
    拖拽模块
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    },
    handleDragEnd(e) {
      // 拖拽结束后的逻辑
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      const draggedElement = document.getElementById(data);
      e.target.appendChild(draggedElement);
    }
  }
};
</script>

使用第三方库（如 Vue.Draggable）

Vue.Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件，提供了更高级的功能和更简单的 API。

安装 Vue.Draggable：

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' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      // 拖拽结束后的逻辑
    }
  }
};
</script>

自定义拖拽逻辑

如果需要更灵活的拖拽逻辑，可以结合鼠标事件（mousedown、mousemove、mouseup）实现自定义拖拽。

<template>
  <div 
    ref="dragElement"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    :style="dragStyle"
  >
    自定义拖拽模块
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0
    };
  },
  computed: {
    dragStyle() {
      return {
        transform: `translate(${this.currentX}px, ${this.currentY}px)`
      };
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX - this.currentX;
      this.startY = e.clientY - this.currentY;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      this.currentX = e.clientX - this.startX;
      this.currentY = e.clientY - this.startY;
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>

拖拽排序与状态管理

在复杂的应用中，拖拽可能需要与 Vuex 或 Pinia 等状态管理工具结合，确保拖拽后的数据同步更新。

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

<script>
import { mapState, mapMutations } from 'vuex';
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapMutations(['updateItems']),
    updateOrder() {
      this.updateItems(this.items);
    }
  }
};
</script>

以上方法可以根据具体需求选择，HTML5 原生 API 适合简单场景，Vue.Draggable 提供了更多功能，自定义逻辑则适合高度定制化的需求。