diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index eed4ec04c..c0d0de0c3 100644 --- a/src/components/board/Board.vue +++ b/src/components/board/Board.vue @@ -54,7 +54,11 @@ -
+
@@ -117,6 +122,8 @@ export default { draggingStack: false, loading: true, newStackTitle: '', + currentScrollPosX: null, + currentMousePosX: null, } }, computed: { @@ -184,12 +191,38 @@ export default { this.$store.dispatch('createStack', newStack) this.newStackTitle = '' }, + + onMouseDown(event) { + this.startMouseDrag(event) + }, + + startMouseDrag(event) { + if (!('dragscrollEnabled' in event.target.dataset)) return + + event.preventDefault() + this.currentMousePosX = event.clientX + this.currentScrollPosX = this.$refs.board.scrollLeft + this.$refs.board.addEventListener('mousemove', this.handleMouseDrag) + this.$refs.board.addEventListener('mouseup', this.stopMouseDrag) + this.$refs.board.addEventListener('mouseleave', this.stopMouseDrag) + }, + + handleMouseDrag(event) { + event.preventDefault() + const deltaX = event.clientX - this.currentMousePosX + this.$refs.board.scrollLeft = this.currentScrollPosX - deltaX + }, + + stopMouseDrag(event) { + this.$refs.board.removeEventListener('mousemove', this.handleMouseDrag) + this.$refs.board.removeEventListener('mouseup', this.stopMouseDrag) + this.$refs.board.removeEventListener('mouseleave', this.stopMouseDrag) + }, }, }