Merge pull request #1114 from Fice/groupDrag

While dragging multiple items across groups, keep the group-offset.

lib/timeline/component/ItemSet.js

@@ -1110,6 +1110,20 @@ ItemSet.prototype._onTouch = function (event) {
   this.touchParams.itemProps = null;
 };
 
+
+/**
+ * Given an group id, returns the index it has.
+ *
+ * @param {Number} groupID
+ * @private
+ */
+ItemSet.prototype._getGroupIndex = function(groupId) {
+    for (var i = 0; i < this.groupIds.length; i++) {
+        if (groupId == this.groupIds[i])
+            return i;
+    }
+}
+
 /**
  * Start dragging the selected events
  * @param {Event} event
@@ -1157,11 +1171,17 @@ ItemSet.prototype._onDragStart = function (event) {
       this.touchParams.itemProps = [props];
     }
     else {
+      this.touchParams.selectedItem = item;
+
+      var baseGroupIndex = this._getGroupIndex(item.data.group);
+
       this.touchParams.itemProps = this.getSelection().map(function (id) {
         var item = me.items[id];
+        var groupIndex = me._getGroupIndex(item.data.group);
         var props = {
           item: item,
           initialX: event.center.x,
+          groupOffset: baseGroupIndex-groupIndex,
           data: util.extend({}, item.data) // clone the items data
         };
 
@@ -1238,6 +1258,22 @@ ItemSet.prototype._onDrag = function (event) {
     var scale = this.body.util.getScale();
     var step = this.body.util.getStep();
 
+    //only calculate the new group for the item that's actually dragged
+    var selectedItem = this.touchParams.selectedItem;
+    var updateGroupAllowed = me.options.editable.updateGroup;
+    var newGroupBase = null;
+    if (updateGroupAllowed && selectedItem) {
+        if (selectedItem.data.group != undefined) {
+          // drag from one group to another
+          var group = me.groupFromTarget(event);
+          if (group) {
+            //we know the offset for all items, so the new group for all items
+            //will be relative to this one.
+            newGroupBase = this._getGroupIndex(group.groupId);
+          }
+        }
+    }
+
     // move
     this.touchParams.itemProps.forEach(function (props) {
       var newProps = {};
@@ -1294,13 +1330,15 @@ ItemSet.prototype._onDrag = function (event) {
       var updateGroupAllowed = me.options.editable.updateGroup || 
                                props.item.editable === true;
 
-      if (updateGroupAllowed && (!props.dragLeft && !props.dragRight)) {
+      if (updateGroupAllowed && (!props.dragLeft && !props.dragRight) && newGroupBase!=null) {
         if (itemData.group != undefined) {
-          // drag from one group to another
-          var group = me.groupFromTarget(event);
-          if (group) {
-            itemData.group = group.groupId;
-          }
+          var newOffset = newGroupBase - props.groupOffset;
+
+          //make sure we stay in bounds
+          newOffset = Math.max(0, newOffset);
+          newOffset = Math.min(me.groupIds.length-1, newOffset);
+
+          itemData.group = me.groupIds[newOffset];
         }
       }