当前位置：首页 > VUE

vue实现拖动滑动

2026-01-17 21:05:27VUE

Vue 实现拖动滑动

使用原生 HTML5 拖放 API

在 Vue 中可以通过 @dragstart、@dragover、@drop 等事件实现基础的拖放功能。以下是一个简单的拖放示例：

<template>
  <div 
    @dragover.prevent
    @drop="handleDrop"
    style="width: 300px; height: 200px; border: 1px dashed #ccc;"
  >
    <div 
      draggable="true"
      @dragstart="handleDragStart"
      style="width: 100px; height: 50px; background: #42b983;"
    >
      拖动我
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', 'drag-data');
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      console.log('拖放数据:', data);
    }
  }
}
</script>

使用第三方库 vue-draggable

对于更复杂的拖放需求，推荐使用 vue-draggable 库。安装方式：

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' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成', this.list);
    }
  }
};
</script>

实现滑动效果

如果需要实现滑动效果（如轮播图），可以使用 vue-awesome-swiper 库：

npm install swiper vue-awesome-swiper

示例代码：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" style="width: 100%">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      },
      slides: [
        { image: 'https://via.placeholder.com/600x300?text=Slide1' },
        { image: 'https://via.placeholder.com/600x300?text=Slide2' },
        { image: 'https://via.placeholder.com/600x300?text=Slide3' }
      ]
    };
  }
};
</script>

自定义拖动滑动

如果需要完全自定义的拖动滑动效果，可以通过监听鼠标事件实现：

<template>
  <div 
    ref="slider"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
    style="width: 100%; height: 200px; background: #eee; position: relative;"
  >
    <div 
      ref="handle"
      style="width: 50px; height: 50px; background: #42b983; position: absolute;"
      :style="{ left: handleX + 'px' }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      handleX: 0
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX - this.handleX;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      const sliderWidth = this.$refs.slider.offsetWidth;
      const handleWidth = this.$refs.handle.offsetWidth;
      let newX = e.clientX - this.startX;

      // 限制在滑块范围内
      newX = Math.max(0, Math.min(newX, sliderWidth - handleWidth));

      this.handleX = newX;
    },
    endDrag() {
      this.isDragging = false;
    }
  }
};
</script>

触摸屏支持

对于移动端触摸事件，需要添加对应的触摸事件监听：

<div 
  @touchstart="startDrag"
  @touchmove="onDrag"
  @touchend="endDrag"
  @touchcancel="endDrag"
>
  <!-- 拖动元素 -->
</div>

对应的 methods 需要修改为处理触摸事件：

startDrag(e) {
  this.isDragging = true;
  this.startX = e.touches[0].clientX - this.handleX;
},
onDrag(e) {
  if (!this.isDragging) return;
  const newX = e.touches[0].clientX - this.startX;
  this.handleX = newX;
}

vue实现拖动滑动