vue原生实现拖拽

Vue 原生实现拖拽功能

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

设置可拖拽元素

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

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

处理拖拽事件

在 Vue 的 methods 中定义拖拽事件处理函数：

methods: {
  handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id)
    e.target.classList.add('dragging')
  },
  handleDragEnd(e) {
    e.target.classList.remove('dragging')
  }
}

设置放置区域

为放置区域绑定拖拽相关事件：

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

处理放置事件

在 methods 中定义放置事件处理函数：

handleDrop(e) {
  e.preventDefault()
  const id = e.dataTransfer.getData('text/plain')
  const draggableElement = document.getElementById(id)
  e.target.appendChild(draggableElement)
}

使用 Vue 数据绑定

更符合 Vue 理念的方式是使用数据驱动而非直接操作 DOM：

data() {
  return {
    items: [
      { id: 1, content: '项目1' },
      { id: 2, content: '项目2' }
    ],
    draggedItem: null
  }
},
methods: {
  handleDragStart(item) {
    this.draggedItem = item
  },
  handleDrop() {
    if (this.draggedItem) {
      // 更新数组顺序或位置
    }
  }
}

样式优化

添加拖拽过程中的视觉反馈：

.dragging {
  opacity: 0.5;
}
.drop-area {
  min-height: 100px;
  border: 2px dashed #ccc;
}
.drop-area.active {
  border-color: #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}

完整示例

<template>
  <div class="container">
    <div 
      v-for="item in items"
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(item)"
      @dragend="handleDragEnd"
      class="draggable-item"
    >
      {{ item.content }}
    </div>

    <div
      @dragover.prevent
      @dragenter="handleDragEnter"
      @dragleave="handleDragLeave"
      @drop="handleDrop"
      :class="['drop-zone', { 'active': isDragOver }]"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: '项目1' },
        { id: 2, content: '项目2' }
      ],
      draggedItem: null,
      isDragOver: false
    }
  },
  methods: {
    handleDragStart(item) {
      this.draggedItem = item
    },
    handleDragEnd() {
      this.draggedItem = null
    },
    handleDragEnter() {
      this.isDragOver = true
    },
    handleDragLeave() {
      this.isDragOver = false
    },
    handleDrop() {
      this.isDragOver = false
      if (this.draggedItem) {
        // 处理数据更新逻辑
      }
    }
  }
}
</script>

<style>
.draggable-item {
  padding: 8px;
  margin: 4px;
  background: #f0f0f0;
  cursor: move;
}
.drop-zone {
  min-height: 100px;
  border: 2px dashed #ccc;
  margin-top: 20px;
  padding: 20px;
  text-align: center;
}
.drop-zone.active {
  border-color: #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}
</style>

通过以上方法，可以在 Vue 中实现原生拖拽功能，既保持了 Vue 的数据驱动特性，又利用了 HTML5 的原生拖拽 API。