当前位置：首页 > VUE

vue实现横向拖拽

2026-02-19 08:05:19VUE

实现横向拖拽的基本思路

在Vue中实现横向拖拽功能，通常需要结合HTML5的拖放API或第三方库如vue-draggable。以下是两种常见实现方式：

使用HTML5原生拖放API

通过HTML5的draggable属性和相关事件实现基础拖拽功能。这种方法适合简单场景，无需引入额外依赖。

vue实现横向拖拽

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDragOver(index) {
      if (this.draggedIndex !== index) {
        const item = this.items[this.draggedIndex];
        this.items.splice(this.draggedIndex, 1);
        this.items.splice(index, 0, item);
        this.draggedIndex = index;
      }
    },
    handleDrop() {
      this.draggedIndex = null;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}
.draggable-item {
  padding: 10px;
  background: #eee;
  cursor: move;
}
</style>

使用vue-draggable库

对于更复杂的拖拽需求（如跨列表拖拽、动画效果等），推荐使用vue-draggable库。它是基于Sortable.js的Vue封装。

vue实现横向拖拽

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="items" 
    class="drag-container"
    item-key="id"
    direction="horizontal"
    @end="onDragEnd"
  >
    <template #item="{ element }">
      <div class="drag-item">{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成', this.items);
    }
  }
};
</script>

<style>
.drag-container {
  display: flex;
  gap: 10px;
}
.drag-item {
  padding: 15px;
  background: #f0f0f0;
  min-width: 100px;
}
</style>