Group Dragging in Timeline

lib/timeline/component/ItemSet.js

@@ -34,7 +34,14 @@ function ItemSet(body, options) {
     },
     align: 'auto', // alignment of box items
     stack: true,
-    groupOrder: null,
+    groupsDraggable: false,
+    groupOrder: function(a,b) {
+    	if (a.order != undefined && b.order != undefined) {
+    		return (a.order - b.order);
+    	} else {
+    		return 0;
+    	}
+    },
 
     selectable: true,
     multiselect: false,
@@ -127,6 +134,7 @@ function ItemSet(body, options) {
   this.stackDirty = true; // if true, all items will be restacked on next redraw
 
   this.touchParams = {}; // stores properties while dragging
+  this.groupTouchParams = {};
   // create the HTML DOM
 
   this._create();
@@ -209,6 +217,12 @@ ItemSet.prototype._create = function(){
   // add item on doubletap
   this.hammer.on('doubletap', this._onAddItem.bind(this));
 
+  this.groupHammer = new Hammer(this.body.dom.leftContainer);
+  this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
+  this.groupHammer.on('panmove',  this._onGroupDrag.bind(this));
+  this.groupHammer.on('panend',   this._onGroupDragEnd.bind(this));
+  this.groupHammer.get('pan').set({threshold:5, direction:30});
+  
   // attach to the DOM
   this.show();
 };
@@ -280,7 +294,7 @@ ItemSet.prototype._create = function(){
 ItemSet.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template','groupTemplate','hide', 'snap'];
+    var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupsDraggable'];
     util.selectiveExtend(fields, this.options, options);
 
     if ('orientation' in options) {
@@ -1389,6 +1403,43 @@ ItemSet.prototype._onDragEnd = function (event) {
   }
 };
 
+ItemSet.prototype._onGroupDragStart = function (event) {
+	if (this.options.groupsDraggable) {
+		this.groupTouchParams.group = this.groupFromTarget(event);
+		if (this.groupTouchParams.group) {
+			event.stopPropagation();
+		}
+	}
+}
+
+ItemSet.prototype._onGroupDrag = function (event) {
+	if (this.options.groupsDraggable && this.groupTouchParams.group) {
+		event.stopPropagation();
+		
+		// drag from one group to another
+		var group = this.groupFromTarget(event);
+		if (group && group != this.groupTouchParams.group) {
+			var groupsData = this.groupsData;
+			var draggedGroup = groupsData.get(this.groupTouchParams.group.groupId);
+			var targetGroup = groupsData.get(group.groupId);
+			
+			if (draggedGroup && targetGroup) {
+				var targetOrder = targetGroup.order;
+				targetGroup.order = draggedGroup.order;
+				groupsData.update(targetGroup);
+				draggedGroup.order = targetOrder;
+				groupsData.update(draggedGroup);
+			}
+		}
+	}
+}
+
+ItemSet.prototype._onGroupDragEnd = function (event) {
+	if (this.options.groupsDraggable) {
+		this.body.emitter.emit('groupDragged');
+	}
+}
+
 /**
  * Handle selecting/deselecting an item when tapping it
  * @param {Event} event

lib/timeline/optionsTimeline.js

@@ -63,6 +63,7 @@ let allOptions = {
     __type__: {object}
   },
   groupOrder: {string, 'function': 'function'},
+  groupsDraggable: {boolean},
   height: {string, number},
   hiddenDates: {object, array},
   locale:{string},
@@ -157,6 +158,7 @@ let configureOptions = {
     },
 
     //groupOrder: {string, 'function': 'function'},
+    groupsDraggable: false,
     height: '',
     //hiddenDates: {object, array},
     locale: '',