diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index b6ac97ab..e4d73789 100644 --- a/lib/timeline/component/ItemSet.js +++ b/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]; } }