scroll board by dragging

Signed-off-by: Simon Hötten <[email protected]>

src/components/board/Board.vue

@@ -54,7 +54,11 @@
 					</form>
 				</template>
 			</NcEmptyContent>
-			<div v-else-if="!isEmpty && !loading" key="board" class="board">
+			<div v-else-if="!isEmpty && !loading"
+				key="board"
+				ref="board"
+				class="board"
+				@mousedown="onMouseDown">
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
@@ -65,6 +69,7 @@
 					<Draggable v-for="stack in stacksByBoard"
 						:key="stack.id"
 						data-click-closes-sidebar="true"
+						data-dragscroll-enabled
 						class="stack-draggable-wrapper">
 						<Stack :stack="stack" :dragging="draggingStack" data-click-closes-sidebar="true" />
 					</Draggable>
@@ -117,6 +122,8 @@ export default {
 			draggingStack: false,
 			loading: true,
 			newStackTitle: '',
+			currentScrollPosX: null,
+			currentMousePosX: null,
 		}
 	},
 	computed: {
@@ -184,12 +191,37 @@ 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)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-
 	@import '../../css/animations';
 	@import '../../css/variables';
 

src/components/board/Stack.vue

@@ -132,6 +132,7 @@
 			data-click-closes-sidebar="true"
 			non-drag-area-selector=".dragDisabled"
 			:drag-handle-selector="dragHandleSelector"
+			data-dragscroll-enabled
 			@should-accept-drop="canEdit"
 			@drag-start="draggingCard = true"
 			@drag-end="draggingCard = false"