vue实现拖拽滚动
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 等库可以快速实现拖拽滚动功能。这些库提供了更丰富的 API 和事件支持，适合复杂场景。
npm install sortablejs<template>
<div ref="scrollContainer">
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
</div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
mounted() {
new Sortable(this.$refs.scrollContainer, {
animation: 150,
onEnd: (event) => {
console.log('拖拽结束', event);
}
});
},
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
};
}
};
</script>自定义指令实现 通过 Vue 自定义指令可以封装拖拽逻辑，使组件更简洁。创建一个指令处理拖拽事件和滚动行为。
Vue.directive('drag-scroll', {
bind(el, binding) {
let isDragging = false;
let startX = 0;
let scrollLeft = 0;
el.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.pageX - el.offsetLeft;
scrollLeft = el.scrollLeft;
});
el.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const x = e.pageX - el.offsetLeft;
const walk = (x - startX) * 2;
el.scrollLeft = scrollLeft - walk;
});
el.addEventListener('mouseup', () => {
isDragging = false;
});
el.addEventListener('mouseleave', () => {
isDragging = false;
});
}
});使用 CSS 属性增强体验
为拖拽区域添加 cursor: grab 和 cursor: grabbing 样式可以提升用户体验。在拖拽过程中动态切换光标样式。
.drag-scroll-container {
cursor: grab;
overflow-x: auto;
white-space: nowrap;
}
.drag-scroll-container:active {
cursor: grabbing;
}注意事项
- 在移动端需要额外处理
touchstart、touchmove和touchend事件。 - 拖拽滚动可能与默认的浏览器滚动行为冲突，需要调用
e.preventDefault()阻止默认事件。 - 对于大量数据的列表，建议使用虚拟滚动技术优化性能。
