vue实现拖拽穿梭

Vue 实现拖拽穿梭功能

拖拽穿梭功能通常指在两个列表之间通过拖拽实现元素的转移。Vue 结合 HTML5 的拖放 API 可以轻松实现这一功能。

基本实现步骤

创建两个列表组件，分别作为源列表和目标列表。使用 draggable 属性标记可拖拽元素，并监听相关拖拽事件。

<template>
  <div>
    <div class="list" @dragover.prevent @drop="handleDrop('source')">
      <div 
        v-for="item in sourceList" 
        :key="item.id"
        draggable="true"
        @dragstart="handleDragStart(item, 'source')"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="list" @dragover.prevent @drop="handleDrop('target')">
      <div 
        v-for="item in targetList" 
        :key="item.id"
        draggable="true"
        @dragstart="handleDragStart(item, 'target')"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

事件处理逻辑

在 Vue 实例中定义拖拽相关的事件处理方法，维护拖拽数据和列表状态。

<script>
export default {
  data() {
    return {
      sourceList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      targetList: [],
      draggedItem: null,
      fromList: null
    }
  },
  methods: {
    handleDragStart(item, list) {
      this.draggedItem = item
      this.fromList = list
    },
    handleDrop(toList) {
      if (!this.draggedItem) return

      if (this.fromList === 'source') {
        this.sourceList = this.sourceList.filter(item => item.id !== this.draggedItem.id)
        this.targetList.push(this.draggedItem)
      } else {
        this.targetList = this.targetList.filter(item => item.id !== this.draggedItem.id)
        this.sourceList.push(this.draggedItem)
      }

      this.draggedItem = null
      this.fromList = null
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以使用专门为 Vue 设计的拖拽库如 vue-draggable 或 sortablejs。

安装 vuedraggable:

npm install vuedraggable

使用示例:

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

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      sourceList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      targetList: []
    }
  },
  methods: {
    onDragEnd() {
      console.log('Drag operation completed')
    }
  }
}
</script>

样式优化

为拖拽操作添加视觉反馈，提升用户体验。

<style>
.list {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
}
.list div {
  padding: 8px;
  margin: 5px 0;
  background-color: #f5f5f5;
  cursor: move;
}
.list div:hover {
  background-color: #e9e9e9;
}
</style>

高级功能扩展

实现拖拽动画、限制拖拽条件或添加拖拽确认对话框等高级功能。

methods: {
  handleDragStart(item, list) {
    if (item.locked) {
      event.preventDefault()
      return
    }
    this.draggedItem = item
    this.fromList = list
  },
  handleDrop(toList) {
    if (!this.draggedItem) return

    if (confirm(`Move ${this.draggedItem.name} to ${toList} list?`)) {
      // 移动逻辑
    }
  }
}

通过以上方法，可以在 Vue 中实现灵活多样的拖拽穿梭功能，根据具体需求选择原生实现或第三方库方案。