diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css index 41d22256..0e9327ae 100644 --- a/lib/timeline/component/css/item.css +++ b/lib/timeline/component/css/item.css @@ -136,6 +136,15 @@ color: white; } +.vis-item .vis-drag-center { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0px; + cursor: move; +} + .vis-item.vis-range .vis-drag-left { position: absolute; width: 24px; diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index f77652bf..2963619b 100644 --- a/lib/timeline/component/item/BoxItem.js +++ b/lib/timeline/component/item/BoxItem.js @@ -164,6 +164,7 @@ BoxItem.prototype.redraw = function() { this.dirty = false; } + this._repaintDragCenter(); this._repaintDeleteButton(dom.box); }; diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index c70cc0a4..c12a3203 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -287,6 +287,7 @@ Item.prototype._updateStyle = function(element) { } }; + /** * Stringify the items contents * @param {string | Element | undefined} content @@ -315,4 +316,27 @@ Item.prototype.getWidthRight = function () { return 0; }; +/** + * Repaint a drag area on the center of the item when the item is selected + * @protected + */ +Item.prototype._repaintDragCenter = function () { + if (this.selected && this.options.editable.updateTime && !this.dom.dragCenter) { + // create and show drag area + var dragCenter = document.createElement('div'); + dragCenter.className = 'vis-drag-center'; + dragCenter.dragCenterItem = this; + + this.dom.box.appendChild(dragCenter); + this.dom.dragCenter = dragCenter; + } + else if (!this.selected && this.dom.dragCenter) { + // delete drag area + if (this.dom.dragCenter.parentNode) { + this.dom.dragCenter.parentNode.removeChild(this.dom.dragCenter); + } + this.dom.dragCenter = null; + } +}; + module.exports = Item; diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js index 10a2463c..91b86909 100644 --- a/lib/timeline/component/item/PointItem.js +++ b/lib/timeline/component/item/PointItem.js @@ -140,7 +140,8 @@ PointItem.prototype.redraw = function() { this.dirty = false; } - + + this._repaintDragCenter(); this._repaintDeleteButton(dom.point); }; diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index 8ec29991..5e287f4f 100644 --- a/lib/timeline/component/item/RangeItem.js +++ b/lib/timeline/component/item/RangeItem.js @@ -124,6 +124,7 @@ RangeItem.prototype.redraw = function() { this.dirty = false; } this._repaintDeleteButton(dom.box); + this._repaintDragCenter(); this._repaintDragLeft(); this._repaintDragRight(); };