如何使用EventListeners进行可拖动滚动

Question

我正在尝试构建一个可以滚动的日历。我也想通过拖动来实现滚动。所以我使用EventListeners。

在第一个mousedown之后，即使我已经释放了鼠标，mousemove也会持续触发。所以removeEventListeners并不能真正起作用。我不太明白哪里出了问题，也不太明白如何让所有听众之间的互动正常进行。

这是我的CodeSandBox

mounted() {
this.initScrollCalendar()
},
methods: {
initScrollCalendar() {
const calendar = this.$refs.calendar
calendar.scrollLeft = this.position.left;
calendar.addEventListener('mousedown', (e) => this.mouseDownHandler())
},
mouseDownHandler() {
const calendar = this.$refs.calendar      
calendar.addEventListener('mousemove', (e) => this.mouseMoveHandler(e) )
calendar.addEventListener('mouseup', this.mouseUpHandler());
},
mouseMoveHandler(e) {
console.log("Move")
const calendar = this.$refs.calendar 
const rect = calendar.getBoundingClientRect()
const clientX = e.clientX - rect.left

const dx = clientX - this.position.x
calendar.scrollLeft = this.position.left + dx
},
mouseUpHandler() {
console.log("Up")
const calendar = this.$refs.calendar 
calendar.removeEventListener('mousemove', (e) => this.mouseMoveHandler(e));
calendar.removeEventListener('mouseup', this.mouseUpHandler());
}
}

Answer 1

我最终使用了vue dragscroll。工作起来很有魅力，设置也很简单。如果需要，我还可以设置滚动容器的起始位置。

不要忘记css 中的overflow: auto

<div ref="scrollContainer" v-dragscroll>
...
</div>

// Setting starting point
const scrollContainer = this.$refs.scrollContainer
scrollContainer.scrollLeft = 500;