当前位置：首页 > VUE

Vue实现鼠标拖拽滚动

2026-01-21 20:08:27VUE

Vue 实现鼠标拖拽滚动的方法

使用原生事件监听实现基础拖拽滚动

在Vue组件中，通过@mousedown、@mousemove和@mouseup事件监听实现拖拽滚动效果。需要记录鼠标按下时的初始位置和滚动容器的初始滚动位置。

<template>
  <div 
    ref="scrollContainer"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    @mouseleave="stopDrag"
  >
    <!-- 可滚动内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      scrollLeft: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.pageX - this.$refs.scrollContainer.offsetLeft
      this.scrollLeft = this.$refs.scrollContainer.scrollLeft
    },
    onDrag(e) {
      if (!this.isDragging) return
      e.preventDefault()
      const x = e.pageX - this.$refs.scrollContainer.offsetLeft
      const walk = (x - this.startX) * 2 // 调整滚动速度
      this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

使用第三方库实现更复杂的拖拽滚动

对于更复杂的拖拽滚动需求，可以使用vue-draggable或sortablejs等库。这些库提供了更完善的拖拽功能，包括惯性滚动、边界限制等特性。

安装sortablejs：

Vue实现鼠标拖拽滚动

npm install sortablejs --save

在Vue中使用：

<template>
  <div ref="scrollContainer">
    <!-- 可拖拽滚动的内容 -->
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  mounted() {
    new Sortable(this.$refs.scrollContainer, {
      animation: 150,
      scroll: true,
      scrollSensitivity: 50,
      scrollSpeed: 10,
      onStart: function() {
        // 拖拽开始时的回调
      },
      onEnd: function() {
        // 拖拽结束时的回调
      }
    })
  }
}
</script>

自定义指令实现复用

将拖拽滚动逻辑封装为Vue自定义指令，可以在多个组件中复用。

Vue实现鼠标拖拽滚动

// dragScroll.js
export default {
  bind(el) {
    let isDown = false
    let startX
    let scrollLeft

    el.addEventListener('mousedown', (e) => {
      isDown = true
      startX = e.pageX - el.offsetLeft
      scrollLeft = el.scrollLeft
    })

    el.addEventListener('mouseleave', () => {
      isDown = false
    })

    el.addEventListener('mouseup', () => {
      isDown = false
    })

    el.addEventListener('mousemove', (e) => {
      if (!isDown) return
      e.preventDefault()
      const x = e.pageX - el.offsetLeft
      const walk = (x - startX) * 2
      el.scrollLeft = scrollLeft - walk
    })
  }
}

在main.js中注册指令：

import dragScroll from './directives/dragScroll'

Vue.directive('drag-scroll', dragScroll)

在组件中使用：

<div v-drag-scroll>
  <!-- 可拖拽滚动的内容 -->
</div>

注意事项

拖拽滚动实现需要考虑性能问题，避免频繁的DOM操作
移动端适配需要额外处理触摸事件（touchstart、touchmove等）
对于复杂布局，可能需要计算多个嵌套容器的滚动位置
可以添加CSS属性cursor: grab和cursor: grabbing增强用户体验
考虑添加惯性滚动效果，使拖拽更加自然

标签: 鼠标拖拽

分享给朋友：

css3怎么制作鼠标

使用CSS3制作鼠标样式可以通过CSS的cursor属性自定义鼠标指针样式，结合伪元素或动画实现更复杂效果。自定义系统预设指针 .element { cursor: pointer; /*…

vue实现拖拽连线

Vue 实现拖拽连线的方法使用第三方库（推荐）对于快速实现拖拽连线功能，推荐使用成熟的第三方库如 jsplumb 或 vue-draggable。这些库提供了丰富的 API 和事件支持，能够简化开…

js实现图片拖拽

实现图片拖拽的基本步骤 HTML 结构需要包含可拖拽的图片元素，并设置 draggable 属性为 true： <img id="dragImage" src="image.jpg" drag…

实现拖拽生成vue

拖拽生成 Vue 组件的实现方法使用可视化拖拽工具推荐使用开源工具如 Vue Draggable 或 Vue Form Builder，它们提供可视化界面和预设组件库，支持通过拖拽生成 Vue 模…

vue实现卡片拖拽

Vue 实现卡片拖拽的方法使用 HTML5 拖放 API HTML5 提供了原生拖放 API，结合 Vue 可以轻松实现拖拽功能。以下是一个基本实现示例： <template> &…

vue实现元素拖拽

Vue 实现元素拖拽的方法使用 HTML5 原生拖拽 API HTML5 提供了原生拖拽 API，可以通过 draggable 属性结合事件监听实现拖拽功能。 <template>…

Vue实现鼠标拖拽滚动