vue实现模块拖拽

Vue 实现模块拖拽的方法

使用 HTML5 原生拖拽 API

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

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

<script>
export default {
  data() {
    return {
      items: ['模块1', '模块2', '模块3'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDragEnd() {
      this.draggedIndex = null;
    },
    handleDrop(index) {
      if (this.draggedIndex !== null) {
        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 组件，提供了更简单的方式实现拖拽功能。

安装 Vue.Draggable：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable v-model="items" group="modules" @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: ['模块1', '模块2', '模块3']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    }
  }
};
</script>

实现跨组件拖拽

如果需要实现跨组件拖拽，可以使用 Vue.Draggable 的 group 属性。

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

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list1: ['模块A', '模块B'],
      list2: ['模块C', '模块D']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    }
  }
};
</script>

自定义拖拽样式

可以通过 CSS 自定义拖拽时的样式，例如高亮显示拖拽元素。

.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}

.draggable-item.drag-start {
  opacity: 0.5;
  background: #c8ebfb;
}

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

拖拽排序与数据同步

拖拽排序后，需要确保数据同步更新。可以通过 Vue 的响应式数据机制实现。

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

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: '模块1' },
        { id: 2, name: '模块2' },
        { id: 3, name: '模块3' }
      ]
    };
  },
  methods: {
    updateOrder() {
      console.log('更新后的顺序:', this.items);
    }
  }
};
</script>

通过以上方法，可以在 Vue 中实现模块拖拽功能，并根据需求选择原生 API 或第三方库。