当前位置：首页 > VUE

vue实现按钮拖拽

2026-01-19 20:01:30VUE

Vue 实现按钮拖拽功能

使用 HTML5 拖放 API

在 Vue 中实现按钮拖拽功能，可以借助 HTML5 的拖放 API。以下是一个简单的实现示例：

<template>
  <div>
    <button 
      draggable="true"
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽按钮
    </button>
    <div 
      class="drop-area"
      @dragover.prevent
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
      e.target.classList.add('dragging')
    },
    handleDragEnd(e) {
      e.target.classList.remove('dragging')
    },
    handleDrop(e) {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      const draggedElement = document.getElementById(data)
      e.target.appendChild(draggedElement)
    }
  }
}
</script>

<style>
.dragging {
  opacity: 0.5;
}
.drop-area {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用第三方库

对于更复杂的拖拽需求，可以考虑使用专门的拖拽库，如 vuedraggable：

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable 
      v-model="items"
      @start="drag=true"
      @end="drag=false"
    >
      <div v-for="item 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' }
      ]
    }
  }
}
</script>

自定义拖拽实现

如果需要完全自定义的拖拽行为，可以通过鼠标事件手动实现：

<template>
  <div>
    <button 
      ref="draggableBtn"
      @mousedown="startDrag"
      class="draggable-btn"
    >
      拖拽按钮
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.onDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX - this.$refs.draggableBtn.getBoundingClientRect().left
      this.startY = e.clientY - this.$refs.draggableBtn.getBoundingClientRect().top
      this.$refs.draggableBtn.style.position = 'absolute'
    },
    onDrag(e) {
      if (!this.isDragging) return
      this.$refs.draggableBtn.style.left = `${e.clientX - this.startX}px`
      this.$refs.draggableBtn.style.top = `${e.clientY - this.startY}px`
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.draggable-btn {
  cursor: move;
  user-select: none;
}
</style>