diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 293f4cca..d847af0a 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -729,12 +729,24 @@ function (option, path) {
-
-
itemsAlwaysDraggable
+
+
itemsAlwaysDraggable
+
boolean or Object
+
Object
+
When a boolean, applies the value only to itemsAlwaysDraggable.item.
+
+
+
itemsAlwaysDraggable.item
boolean
false
If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.
+
+
itemsAlwaysDraggable.range
+
boolean
+
false
+
If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option itemsAlwaysDraggable.item is set true.
The itemsAlwaysDraggable option allows to drag items around without first selecting them. When itemsAlwaysDraggable.range is set to true, the range can be changed without selection as well.
+
+
+
+
+
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 362d4320..0aa845b9 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -44,7 +44,10 @@ function ItemSet(body, options) {
selectable: true,
multiselect: false,
- itemsAlwaysDraggable: false,
+ itemsAlwaysDraggable: {
+ item: false,
+ range: false,
+ },
editable: {
updateTime: false,
@@ -336,12 +339,26 @@ ItemSet.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
var fields = [
- 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable',
+ 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect',
'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime'
];
util.selectiveExtend(fields, this.options, options);
+ if ('itemsAlwaysDraggable' in options) {
+ if (typeof options.itemsAlwaysDraggable === 'boolean') {
+ this.options.itemsAlwaysDraggable.item = options.itemsAlwaysDraggable;
+ this.options.itemsAlwaysDraggable.range = false;
+ }
+ else if (typeof options.itemsAlwaysDraggable === 'object') {
+ util.selectiveExtend(['item', 'range'], this.options.itemsAlwaysDraggable, options.itemsAlwaysDraggable);
+ // only allow range always draggable when item is always draggable as well
+ if (! this.options.itemsAlwaysDraggable.item) {
+ this.options.itemsAlwaysDraggable.range = false;
+ }
+ }
+ }
+
if ('orientation' in options) {
if (typeof options.orientation === 'string') {
this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom';
@@ -1285,7 +1302,7 @@ ItemSet.prototype._onDragStart = function (event) {
var me = this;
var props;
- if (item && (item.selected || this.options.itemsAlwaysDraggable)) {
+ if (item && (item.selected || this.options.itemsAlwaysDraggable.item)) {
if (this.options.editable.overrideItems &&
!this.options.editable.updateTime &&
@@ -1327,7 +1344,7 @@ ItemSet.prototype._onDragStart = function (event) {
else {
var baseGroupIndex = this._getGroupIndex(item.data.group);
- var itemsToDrag = (this.options.itemsAlwaysDraggable && !item.selected) ? [item.id] : this.getSelection();
+ var itemsToDrag = (this.options.itemsAlwaysDraggable.item && !item.selected) ? [item.id] : this.getSelection();
this.touchParams.itemProps = itemsToDrag.map(function (id) {
var item = me.items[id];
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 9bfa662d..cb16b766 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -169,8 +169,13 @@ Item.prototype._repaintDragCenter = function () {
});
if (this.dom.box) {
- this.dom.box.appendChild(dragCenter);
- }
+ if (this.dom.dragLeft) {
+ this.dom.box.insertBefore(dragCenter, this.dom.dragLeft);
+ }
+ else {
+ this.dom.box.appendChild(dragCenter);
+ }
+ }
else if (this.dom.point) {
this.dom.point.appendChild(dragCenter);
}
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 7deaf74c..0af637cc 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -291,7 +291,7 @@ RangeItem.prototype.repositionY = function() {
* @protected
*/
RangeItem.prototype._repaintDragLeft = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
+ if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragLeft) {
// create and show drag area
var dragLeft = document.createElement('div');
dragLeft.className = 'vis-drag-left';
@@ -300,7 +300,7 @@ RangeItem.prototype._repaintDragLeft = function () {
this.dom.box.appendChild(dragLeft);
this.dom.dragLeft = dragLeft;
}
- else if (!this.selected && this.dom.dragLeft) {
+ else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragLeft) {
// delete drag area
if (this.dom.dragLeft.parentNode) {
this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
@@ -314,7 +314,7 @@ RangeItem.prototype._repaintDragLeft = function () {
* @protected
*/
RangeItem.prototype._repaintDragRight = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
+ if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragRight) {
// create and show drag area
var dragRight = document.createElement('div');
dragRight.className = 'vis-drag-right';
@@ -323,7 +323,7 @@ RangeItem.prototype._repaintDragRight = function () {
this.dom.box.appendChild(dragRight);
this.dom.dragRight = dragRight;
}
- else if (!this.selected && this.dom.dragRight) {
+ else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragRight) {
// delete drag area
if (this.dom.dragRight.parentNode) {
this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 56df9c63..254cfa8c 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -89,7 +89,11 @@ let allOptions = {
repeat: {string},
__type__: {object, array}
},
- itemsAlwaysDraggable: { 'boolean': bool},
+ itemsAlwaysDraggable: {
+ item: { 'boolean': bool, 'undefined': 'undefined'},
+ range: { 'boolean': bool, 'undefined': 'undefined'},
+ __type__: { 'boolean': bool, object}
+ },
locale:{string},
locales:{
__any__: {any},