Added dragging of tasks

package.json

@@ -12,7 +12,8 @@
     "lodash": "^4.17.11",
     "v-tooltip": "^2.0.0-rc.33",
     "verte": "^0.0.10",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-drag-resize": "^1.3.2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.4",

src/components/tasks/gantt-component.vue

@@ -26,9 +26,25 @@
 		</div>
 		<div class="tasks" :style="{'width': fullWidth + 'px'}">
 			<div class="row" v-for="t in theTasks" :key="t.id">
-				<div class="task" :style="{'margin-left': t.offsetDays * dayWidth + 'px', 'width': t.durationDays * dayWidth + 'px'}">
-					{{t.text}}
-				</div>
+				<VueDragResize
+						class="task"
+						:isActive="true"
+						:x="t.offsetDays * dayWidth - 6"
+						:y="0"
+						:w="t.durationDays * dayWidth"
+						:h="31"
+						:minw="dayWidth"
+						:resizing="resizeTask"
+						:dragging="resizeTask"
+						:snapToGrid="true"
+						:gridX="dayWidth"
+						:sticks="['mr', 'ml']"
+						axis="x"
+						:parentLimitation="true"
+						:parentW="fullWidth"
+				>
+						{{t.text}}
+				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
 				<div class="row" v-for="t in tasksWithoutDates" :key="t.id">
@@ -42,8 +58,14 @@
 </template>
 
 <script>
+	import VueDragResize from 'vue-drag-resize'
+	import TaskService from '../../services/task'
+
 	export default {
 		name: 'GanttChart',
+		components: {
+			VueDragResize,
+		},
 		props: {
 			tasks: {
 				type: Array,
@@ -61,6 +83,7 @@
 				endDate: null,
 				theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
 				tasksWithoutDates: [],
+				taskService: TaskService,
 				// The width of a day in pixels, used to calculate all sorts of things.
 				dayWidth: 35,
 				fullWidth: 0,
@@ -75,6 +98,7 @@
 		},
 		beforeMount() {
 			this.now = new Date()
+			this.taskService = new TaskService()
 			this.setDates()
 			this.prepareGanttDays()
 			this.parseTasks()
@@ -126,6 +150,9 @@
 							return 1
 						return 0
 					})
+			},
+			resizeTask() {
+
 			}
 		},
 	}

src/styles/gantt.scss

@@ -2,7 +2,7 @@ $gantt-border: 1px solid $grey-lighter;
 $gantt-vertical-border-color: lighten($grey, 45);
 
 .gantt-chart {
-  padding: 0;
+  padding: 5px 0;
   overflow-x: auto;
 
   .dates {
@@ -56,6 +56,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
 
     .row {
       background: repeating-linear-gradient(90deg, $gantt-vertical-border-color, $gantt-vertical-border-color 1px, lighten($grey, 50) 1px, lighten($grey, 50) 35px);
+      height: 45px;
 
       &:nth-child(even) {
         background: repeating-linear-gradient(90deg, $gantt-vertical-border-color, $gantt-vertical-border-color 1px, lighten($grey, 55) 1px, lighten($grey, 55) 35px);
@@ -72,7 +73,8 @@ $gantt-vertical-border-color: lighten($grey, 45);
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        cursor: default;
+        cursor: grab;
+        position: relative;
 
         -webkit-touch-callout: none; // iOS Safari
         -webkit-user-select: none; // Safari
@@ -85,6 +87,10 @@ $gantt-vertical-border-color: lighten($grey, 45);
           border: 2px dashed $grey-light;
           background: lighten($grey-light, 40);
         }
+
+        &:active {
+          cursor: grabbing;
+        }
       }
     }
   }

yarn.lock

@@ -8973,6 +8973,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-drag-resize@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz#99132a99746c878e4596fad08d36c98f604930a3"
+  integrity sha512-XiSEep3PPh9IPQqa4vIy/YENBpYch2SIPNipcPAEGhaSa0V8A8gSq9s7JQ66p/hiINdnR7f5ZqAkOdm6zU/4Gw==
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"