Vue实现拖拽布局

Vue实现拖拽布局的方法

使用Vue实现拖拽布局可以通过原生HTML5的拖拽API或第三方库来完成。以下是几种常见实现方式：

使用HTML5原生拖拽API

HTML5提供了原生的拖拽API，结合Vue的数据绑定能力可以实现基本拖拽功能：

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    }
  },
  methods: {
    drag(index) {
      this.draggedIndex = index
    },
    handleDrop() {
      const droppedIndex = /* 获取放置位置索引 */;
      [this.items[this.draggedIndex], this.items[droppedIndex]] = 
        [this.items[droppedIndex], this.items[this.draggedIndex]]
    }
  }
}
</script>

使用Vue.Draggable库

Vue.Draggable是基于Sortable.js的Vue组件，提供了更完善的拖拽功能：

npm install vuedraggable

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成')
    }
  }
}
</script>

实现网格拖拽布局

对于网格布局的拖拽，可以使用interact.js等库：

npm install interactjs

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="grid-item"
      ref="gridItems"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
import interact from 'interactjs'

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  mounted() {
    interact(this.$refs.gridItems)
      .draggable({
        inertia: true,
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
          })
        ],
        autoScroll: true
      })
      .on('dragmove', (event) => {
        const target = event.target
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

        target.style.transform = `translate(${x}px, ${y}px)`
        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
      })
  }
}
</script>

实现拖拽排序与交换

对于需要排序和交换位置的场景，可以结合Vue的响应式特性：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item A' },
        { id: 2, name: 'Item B' },
        { id: 3, name: 'Item C' }
      ],
      draggingIndex: null,
      dragOverIndex: null
    }
  },
  methods: {
    dragStart(index) {
      this.draggingIndex = index
    },
    dragEnter(index) {
      this.dragOverIndex = index
    },
    dragEnd() {
      if (this.dragOverIndex !== null && this.draggingIndex !== this.dragOverIndex) {
        const newList = [...this.list]
        const movedItem = newList.splice(this.draggingIndex, 1)[0]
        newList.splice(this.dragOverIndex, 0, movedItem)
        this.list = newList
      }
      this.draggingIndex = null
      this.dragOverIndex = null
    }
  }
}
</script>

实现拖拽边界限制

为防止元素被拖出容器，可以添加边界检查：

methods: {
  handleDrag(event, index) {
    const containerRect = this.$el.getBoundingClientRect()
    const itemRect = event.target.getBoundingClientRect()

    const minX = containerRect.left
    const maxX = containerRect.right - itemRect.width
    const minY = containerRect.top
    const maxY = containerRect.bottom - itemRect.height

    let newX = event.clientX - itemRect.width / 2
    let newY = event.clientY - itemRect.height / 2

    newX = Math.max(minX, Math.min(newX, maxX))
    newY = Math.max(minY, Math.min(newY, maxY))

    this.items[index].x = newX - containerRect.left
    this.items[index].y = newY - containerRect.top
  }
}

以上方法涵盖了从基础到高级的Vue拖拽布局实现，可以根据具体需求选择合适的方式。对于复杂场景，推荐使用专门的拖拽库如Vue.Draggable或interact.js，它们提供了更丰富的功能和更好的兼容性。