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)
+ },
},
}