vue原生实现拖拽

Vue 原生实现拖拽功能

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

使用 HTML5 拖拽 API

HTML5 提供了原生拖拽支持，通过 draggable 属性和一系列拖拽事件可以实现基础拖拽功能。

<template>
  <div>
    <div 
      draggable="true"
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽元素
    </div>
    <div 
      @dragover.prevent
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '拖拽数据');
    },
    handleDrop(e) {
      const data = e.dataTransfer.getData('text/plain');
      console.log('接收到的数据:', data);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

使用 Vue 的指令实现拖拽

可以通过自定义指令封装拖拽逻辑，提升代码复用性。

<template>
  <div v-draggable @drag-end="onDragEnd">
    可拖拽元素
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el, binding) {
        el.draggable = true;
        el.addEventListener('dragstart', (e) => {
          e.dataTransfer.setData('text/plain', binding.value);
        });
      }
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

实现列表拖拽排序

结合 v-for 和拖拽事件可以实现列表的拖拽排序功能。

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @drop="handleDrop(index)"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

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

使用第三方库

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

<template>
  <draggable v-model="list" @end="onDragEnd">
    <div v-for="item in list" :key="item.id">
      {{ item.text }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.list);
    }
  }
}
</script>

以上方法覆盖了从基础到高级的 Vue 拖拽实现方案，可以根据具体需求选择合适的实现方式。