vue 原生实现拖拽

Vue 原生实现拖拽功能

在 Vue 中实现拖拽功能可以通过 HTML5 的拖放 API 结合 Vue 的事件绑定和数据响应式特性来完成。以下是具体实现方法：

设置可拖拽元素

为需要拖拽的元素添加 draggable 属性，并绑定相关事件：

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽元素
  </div>
</template>

处理拖拽事件

在 Vue 实例中定义拖拽相关的事件处理方法：

<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')
    }
  }
}
</script>

设置放置目标区域

为接收拖拽元素的区域绑定放置相关事件：

<template>
  <div 
    @dragover.prevent
    @dragenter.prevent
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

处理放置事件

实现放置区域的逻辑处理：

<script>
export default {
  methods: {
    handleDrop(e) {
      const id = e.dataTransfer.getData('text/plain')
      const draggableElement = document.getElementById(id)
      e.target.appendChild(draggableElement)
    }
  }
}
</script>

添加样式反馈

为拖拽过程添加视觉反馈：

<style>
.dragging {
  opacity: 0.5;
}
.dropzone {
  min-height: 100px;
  border: 2px dashed #ccc;
  padding: 10px;
}
</style>

数据驱动的拖拽实现

结合 Vue 的响应式数据实现更完整的拖拽逻辑：

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(item) {
      this.draggedItem = item
    },
    handleDrop(index) {
      if (this.draggedItem) {
        const draggedIndex = this.items.indexOf(this.draggedItem)
        this.items.splice(draggedIndex, 1)
        this.items.splice(index, 0, this.draggedItem)
      }
    }
  }
}
</script>

完整示例代码

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(item) {
      this.draggedItem = item
    },
    handleDrop(index) {
      if (this.draggedItem) {
        const draggedIndex = this.items.indexOf(this.draggedItem)
        const [removed] = this.items.splice(draggedIndex, 1)
        this.items.splice(index, 0, removed)
      }
    }
  }
}
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px 0;
  background: #f0f0f0;
  cursor: move;
}
.draggable-item[draggable="true"]:hover {
  background: #e0e0e0;
}
</style>

通过以上方法，可以在 Vue 中实现基本的拖拽功能。对于更复杂的场景，可以考虑使用专门的拖拽库如 Vue.Draggable 等。