当前位置：首页 > VUE

vue实现拖动滑动

2026-02-18 13:32:19VUE

Vue 实现拖动滑动功能

在 Vue 中实现拖动滑动功能可以通过原生 HTML5 的拖放 API 或第三方库（如 vuedraggable）来实现。以下是两种方法的详细说明：

使用原生 HTML5 拖放 API

设置可拖拽元素

为需要拖动的元素添加 draggable="true" 属性。
监听 dragstart 事件，存储拖动数据。

<template>
  <div 
    v-for="(item, index) in items" 
    :key="index"
    draggable="true"
    @dragstart="handleDragStart(index, $event)"
  >
    {{ item }}
  </div>
</template>

methods: {
  handleDragStart(index, event) {
    event.dataTransfer.setData('text/plain', index);
  }
}

设置放置目标

监听 dragover 事件阻止默认行为以允许放置。
监听 drop 事件处理放置逻辑。

<div 
  @dragover.prevent
  @drop="handleDrop($event)"
>
  放置区域
</div>

methods: {
  handleDrop(event) {
    const fromIndex = event.dataTransfer.getData('text/plain');
    const toIndex = /* 计算目标位置 */;
    this.reorderItems(fromIndex, toIndex);
  },
  reorderItems(fromIndex, toIndex) {
    const item = this.items.splice(fromIndex, 1)[0];
    this.items.splice(toIndex, 0, item);
  }
}

使用 `vuedraggable` 库

安装依赖
```
npm install vuedraggable
```

实现拖拽列表

导入 vuedraggable 组件并绑定数据。

<template>
  <draggable 
    v-model="items" 
    @end="onDragEnd"
  >
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    onDragEnd(event) {
      console.log('拖动后的顺序:', this.items);
    }
  }
};

横向滑动实现

如果需要实现横向滑动（如轮播图），可以通过 CSS 和触摸事件实现：

CSS 设置滑动容器

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

触摸事件处理

监听 touchstart、touchmove 和 touchend 事件计算滑动距离。

<div 
  class="slider-container"
  @touchstart="onTouchStart"
  @touchmove="onTouchMove"
  @touchend="onTouchEnd"
>
  <div v-for="(slide, index) in slides" :key="index" class="slide">
    {{ slide }}
  </div>
</div>

data() {
  return {
    startX: 0,
    currentX: 0
  };
},
methods: {
  onTouchStart(event) {
    this.startX = event.touches[0].clientX;
  },
  onTouchMove(event) {
    this.currentX = event.touches[0].clientX - this.startX;
  },
  onTouchEnd() {
    if (this.currentX > 50) {
      // 向右滑动逻辑
    } else if (this.currentX < -50) {
      // 向左滑动逻辑
    }
  }
}

通过以上方法，可以实现 Vue 中的拖动和滑动功能。原生 API 适合简单场景，而 vuedraggable 更适合复杂的列表拖拽需求。横向滑动可通过 CSS 和触摸事件结合实现。

vue实现拖动滑动