当前位置：首页 > VUE

vue实现拖动滑动

2026-03-10 02:50:20VUE

Vue实现拖动滑动的方法

使用HTML5拖放API

HTML5提供了原生拖放API，结合Vue的事件绑定可以轻松实现拖动功能。需要监听dragstart、dragend和dragover等事件。

vue实现拖动滑动

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragover.prevent="handleDragOver"
    @dragend="handleDragEnd"
  >
    可拖动的元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    },
    handleDragOver(e) {
      // 阻止默认行为以允许放置
      e.preventDefault();
    },
    handleDragEnd() {
      // 拖动结束后的处理
    }
  }
}
</script>

使用第三方库vue-draggable

vue-draggable是基于Sortable.js的Vue组件，适合列表排序和拖动场景。安装后可直接使用。

vue实现拖动滑动

npm install vuedraggable

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

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖动结束');
    }
  }
}
</script>

实现触摸屏滑动

对于移动端触摸事件，需要监听touchstart、touchmove和touchend事件。通过计算触摸位置变化来实现滑动效果。

<template>
  <div
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >
    可滑动元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0
    };
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    onTouchMove(e) {
      const currentX = e.touches[0].clientX;
      this.offsetX = currentX - this.startX;
    },
    onTouchEnd() {
      // 滑动结束后的处理
      this.offsetX = 0;
    }
  }
}
</script>

使用CSS Scroll Snap

对于简单的滑动效果，可以结合CSS Scroll Snap实现。这种方法不需要JavaScript，纯CSS即可完成。

<template>
  <div class="snap-container">
    <div class="snap-item">Item 1</div>
    <div class="snap-item">Item 2</div>
  </div>
</template>

<style>
.snap-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.snap-item {
  scroll-snap-align: start;
  flex: none;
  width: 100%;
}
</style>