vue实现卡片拖拽

Vue 实现卡片拖拽功能

使用 HTML5 原生拖拽 API

在 Vue 中可以通过 HTML5 的拖拽 API 实现卡片拖拽功能。需要设置 draggable 属性为 true，并监听 dragstart、dragover 和 drop 事件。

<template>
  <div class="card" draggable="true" @dragstart="handleDragStart" @dragover.prevent @drop="handleDrop">
    {{ cardContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardContent: '可拖拽卡片'
    }
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', this.cardContent)
    },
    handleDrop(e) {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      this.cardContent = data
    }
  }
}
</script>

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 拖拽组件库，适合实现列表或卡片的拖拽排序。

安装 vue-draggable：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="cards" group="cards" @start="drag=true" @end="drag=false">
    <div v-for="card in cards" :key="card.id" class="card">
      {{ card.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      cards: [
        { id: 1, content: '卡片1' },
        { id: 2, content: '卡片2' },
        { id: 3, content: '卡片3' }
      ]
    }
  }
}
</script>

自定义拖拽实现

对于更复杂的拖拽需求，可以结合鼠标事件实现自定义拖拽逻辑。

<template>
  <div 
    class="card"
    @mousedown="startDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    {{ cardContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardContent: '自定义拖拽卡片',
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 }
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.handleDrag)
    window.addEventListener('mouseup', this.stopDrag)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.handleDrag)
    window.removeEventListener('mouseup', this.stopDrag)
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startPos = { x: e.clientX - this.position.x, y: e.clientY - this.position.y }
    },
    handleDrag(e) {
      if (this.isDragging) {
        this.position.x = e.clientX - this.startPos.x
        this.position.y = e.clientY - this.startPos.y
      }
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.card {
  position: absolute;
  width: 200px;
  height: 100px;
  background: #f0f0f0;
  cursor: move;
}
</style>

拖拽边界限制

在实际应用中，通常需要限制拖拽范围，防止卡片被拖出可视区域。

handleDrag(e) {
  if (this.isDragging) {
    let newX = e.clientX - this.startPos.x
    let newY = e.clientY - this.startPos.y

    // 限制在窗口范围内
    const maxX = window.innerWidth - this.$el.offsetWidth
    const maxY = window.innerHeight - this.$el.offsetHeight

    this.position.x = Math.max(0, Math.min(newX, maxX))
    this.position.y = Math.max(0, Math.min(newY, maxY))
  }
}

以上方法提供了不同复杂度的 Vue 卡片拖拽实现方案，可以根据项目需求选择合适的方式。HTML5 原生 API 适合简单场景，vue-draggable 适合列表排序，自定义实现则提供最大的灵活性。