当前位置：首页 > VUE

vue实现拖拽滚动

2026-03-30 04:40:56VUE

实现拖拽滚动的基本思路

在Vue中实现拖拽滚动功能，可以通过监听鼠标事件并结合CSS样式和JavaScript逻辑来完成。核心是利用鼠标按下、移动和释放事件来触发滚动行为。

使用原生事件监听

创建Vue组件时，在mounted钩子中绑定事件，并在beforeDestroy中解绑以避免内存泄漏。通过clientX和clientY记录鼠标位置，计算移动距离来更新滚动位置。

export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      scrollLeft: 0
    }
  },
  mounted() {
    const element = this.$refs.scrollContainer;
    element.addEventListener('mousedown', this.startDrag);
    element.addEventListener('mousemove', this.drag);
    element.addEventListener('mouseup', this.endDrag);
    element.addEventListener('mouseleave', this.endDrag);
  },
  beforeDestroy() {
    const element = this.$refs.scrollContainer;
    element.removeEventListener('mousedown', this.startDrag);
    element.removeEventListener('mousemove', this.drag);
    element.removeEventListener('mouseup', this.endDrag);
    element.removeEventListener('mouseleave', this.endDrag);
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.scrollLeft = this.$refs.scrollContainer.scrollLeft;
    },
    drag(e) {
      if (!this.isDragging) return;
      e.preventDefault();
      const x = e.clientX;
      const walk = (x - this.startX) * 2; // 调整滚动速度
      this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk;
    },
    endDrag() {
      this.isDragging = false;
    }
  }
}

使用第三方库简化实现

对于复杂场景，可以使用现成的拖拽库如vue-draggable或sortablejs。这些库提供了更丰富的API和更好的兼容性。

vue实现拖拽滚动

安装sortablejs：

npm install sortablejs

在Vue组件中使用：

vue实现拖拽滚动

import Sortable from 'sortablejs';

export default {
  mounted() {
    const element = this.$refs.scrollContainer;
    Sortable.create(element, {
      animation: 150,
      ghostClass: 'ghost',
      onEnd: (event) => {
        console.log('拖拽完成', event);
      }
    });
  }
}

CSS样式优化

为拖拽容器添加基本样式，确保滚动行为流畅且视觉反馈明确：

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}

.scroll-container:active {
  cursor: grabbing;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

移动端适配

针对触摸设备，需要额外监听touchstart、touchmove和touchend事件。逻辑与鼠标事件类似，但需使用touches数组获取位置信息。

methods: {
  startDrag(e) {
    this.isDragging = true;
    this.startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
    this.scrollLeft = this.$refs.scrollContainer.scrollLeft;
  },
  drag(e) {
    if (!this.isDragging) return;
    e.preventDefault();
    const x = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
    const walk = (x - this.startX) * 2;
    this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk;
  }
}