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>

使用 HTML5 原生拖拽 API

通过 HTML5 的 draggable 属性和相关事件实现基础拖拽功能。

示例代码：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item A' },
        { id: 2, text: 'Item B' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDrop(e, targetItem) {
      const indexDragged = this.items.indexOf(this.draggedItem)
      const indexTarget = this.items.indexOf(targetItem)
      this.items.splice(indexDragged, 1)
      this.items.splice(indexTarget, 0, this.draggedItem)
    }
  }
}
</script>

实现可拖拽布局系统

对于复杂的布局系统，可以结合 Vue.Draggable 和 CSS Grid/Flexbox。

网格布局示例：

<template>
  <div class="grid-container">
    <draggable 
      v-model="gridItems" 
      class="grid"
      :options="{group: 'grid', animation: 150}"
    >
      <div 
        v-for="item in gridItems" 
        :key="item.id"
        class="grid-item"
      >
        {{ item.content }}
      </div>
    </draggable>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  border: 1px solid #ccc;
  padding: 20px;
  background: #f9f9f9;
}
</style>

高级功能实现

对于需要限制拖拽区域或添加占位符的高级需求，可以配置 Vue.Draggable 的选项。

配置示例：

<draggable
  v-model="items"
  :options="{
    animation: 150,
    ghostClass: 'ghost',
    chosenClass: 'chosen',
    dragClass: 'drag',
    handle: '.handle'
  }"
>
  <!-- 内容 -->
</draggable>

对应的 CSS 样式：

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.chosen {
  background: #f0f0f0;
}
.drag {
  cursor: move;
}
.handle {
  cursor: grab;
}

这些方法可以根据具体需求组合使用，实现从简单到复杂的各种拖拽布局场景。