Add dragging capability

src/components/PostScrubber.vue

@@ -1,13 +1,67 @@
 <template>
 	<div class='post_scrubber'>
-		<div class='post_scrubber__line'></div>
-		<div class='post_scrubber__dragger'></div>
+		<div class='post_scrubber__line' ref='line' @click='lineClick'></div>
+		<div
+			class='post_scrubber__dragger'
+			
+			:style='{
+				"top": draggerYCoordPx
+			}'
+
+			@mousedown.prevent.stop='setDragging(true)'
+			@mouseup.prevent.stop='setDragging(false)'
+		></div>
 	</div>
 </template>
 
 <script>
 	export default {
-		name: 'PostScrubber'
+		name: 'PostScrubber',
+		data () {
+			return {
+				clientY: 0,
+				lineTop: 0,
+				lineHeight: 0,
+				dragging: false
+			}
+		},
+		computed: {
+			draggerYCoordPx () {
+				if(!this.clientY || !this.lineTop) return '0px'
+
+				let top = this.clientY - this.lineTop
+
+				if(top < 0) {
+					return '0px'
+				} else if(top > this.lineHeight) {
+					return this.lineHeight + 'px'
+				} else {
+					return top + 'px'
+				}
+			}
+		},
+		methods: {
+			setDragging (val) {
+				this.dragging = val
+			},
+			lineClick (e) {
+				this.clientY = e.clientY
+			}
+		},
+		mounted () {
+			let lineRect = this.$refs.line.getBoundingClientRect()
+			this.lineTop = lineRect.top
+			this.lineHeight = lineRect.height
+
+			window.addEventListener('mousemove', e => {
+				if(this.dragging) {
+					this.clientY = e.clientY
+				}
+			})
+			window.addEventListener('mouseup', e => {
+				this.dragging = false
+			})
+		}
 	}
 </script>