当前位置：首页 > VUE

vue 实现卡片拖动

2026-03-28 05:20:13VUE

Vue 实现卡片拖动的几种方法

使用 HTML5 拖放 API

HTML5 原生提供了拖放 API，可以直接在 Vue 中使用。这种方法适合简单的拖放需求。

<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()
      this.cardContent = e.dataTransfer.getData('text/plain')
    }
  }
}
</script>

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，提供了更丰富的拖拽功能，适合列表排序等复杂场景。

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <draggable 
    v-model="cards" 
    group="cards" 
    @end="onDragEnd"
  >
    <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' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.cards)
    }
  }
}
</script>

使用 interact.js 实现自定义拖拽

interact.js 是一个轻量级的拖拽库，可以实现更灵活的拖拽效果。

安装依赖：

npm install interactjs

使用示例：

vue 实现卡片拖动

<template>
  <div 
    ref="card" 
    class="card"
  >
    {{ cardContent }}
  </div>
</template>

<script>
import interact from 'interactjs'

export default {
  data() {
    return {
      cardContent: '可拖动卡片'
    }
  },
  mounted() {
    interact(this.$refs.card)
      .draggable({
        inertia: true,
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
          })
        ],
        onmove: this.dragMoveListener
      })
  },
  methods: {
    dragMoveListener(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>