@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/column-dragging/es6/ColumnDragging.js

@@ -0,0 +1,764 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+
+/** @typedef {Object} ColumnDraggingPlugin~Options
+* @description The options can be specified by `columnDragging` property of the main grid's options
+* @property {Function=} dragStart Function handler for dragStart event
+* @property {Function=} drag Function handler for drag event
+* @property {Function=} dragEnd Function handler for dragEnd event
+* @property {Function=} preColumnMoved Function handler for preColumnMoved event
+* @property {Function=} columnMoved Function handler for columnMoved event
+* @property {Function=} dragInterval Function handler for dragInterval event
+* @property {Function=} dragBoxRenderer Allow user to customize dragBox
+*/
+
+/** @event ColumnDraggingPlugin#drag
+* @description Fired on each mousemove or touchmove
+* @type {Object}
+*/
+/** @event ColumnDraggingPlugin#dragStart
+* @description The event is fired at the beginning of the drag operation. You can cancel the operation by setting cancel property to true.
+* @type {Object}
+* @example
+* // ...
+* dragStart: function(e) {
+*   e.cancel = true; // To cancel the operation
+* }, // ..
+*/
+/** @event ColumnDraggingPlugin#dragEnd
+* @description The event will always be fired at the end of the drag operation. This is to allow clearing of any resource used. You can cancel the data moving operation by setting cancel property to true.
+* @type {Object}
+*/
+
+/** @event ColumnDraggingPlugin#preColumnMoved
+* @description Fired before the actual move
+* @type {Object}
+* @property {number} startColumnIndex
+* @property {number} destColumnIndex
+* @example
+* // ...
+* preColumnMoved: function(e) {
+*   e.cancel = true; // To cancel the operation
+* }, // ..
+*/
+/** @event ColumnDraggingPlugin#columnMoved
+* @description Fired if the column is successfully moved by drag and drop operation
+* @type {Object}
+* @property {number} startColumnIndex
+* @property {number} destColumnIndex
+*/
+
+/** @event ColumnDraggingPlugin#dragInterval
+* @description Fired at an interval during drag
+* @type {Object}
+*/
+
+/** @constructor
+* @param {ColumnDraggingPlugin~Options=} options
+* @extends {GridPlugin}
+*/
+var ColumnDraggingPlugin = function (options) {
+	var t = this;
+	t._onMouseUp = t._onMouseUp.bind(t);
+	t._onMouseDown = t._onMouseDown.bind(t);
+
+	t._onDrag = t._onDrag.bind(t);
+	t._onDragStart = t._onDragStart.bind(t);
+	t._onDragEnd = t._onDragEnd.bind(t);
+	t._onDragPulse = t._onDragPulse.bind(t);
+	t._onThemeLoaded = t._onThemeLoaded.bind(t);
+
+	t._hosts = [];
+
+	t._guideline = document.createElement("div");
+	t._guideline.className = "guideline";
+	t._dragBox = document.createElement("div");
+	t._dragBox.className = "drag-box-disabled"; // defualt disable dragbox
+	t._dragBoxIcon = document.createElement("ef-icon");
+	t._dragBoxIcon.className = "drag-box-icon";
+
+	if(options) {
+		this.config({ "columnDragging": options });
+	}
+};
+Ext.inherits(ColumnDraggingPlugin, GridPlugin);
+
+/** @private
+* @type {Core}
+*/
+ColumnDraggingPlugin.prototype._clickedGrid = null;
+/** @private
+* @type {ILayoutGrid}
+*/
+ColumnDraggingPlugin.prototype._clickedSection = null;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._clickedRow = -1;
+/** @private
+* @type {Element}
+*/
+ColumnDraggingPlugin.prototype._guideline = null;
+/** @private
+* @type {Element}
+*/
+ColumnDraggingPlugin.prototype._dragBox = null;
+/** @private
+* @type {Element}
+*/
+ColumnDraggingPlugin.prototype._dragBoxIcon = null;
+/** @type {Object}
+* @private
+*/
+ColumnDraggingPlugin.prototype._dragBoxRenderer = null;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._timerId = 0;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._dragPulseId = 0;
+/** @private
+* @type {Object}
+*/
+ColumnDraggingPlugin.prototype._pos = null; // Cache of current mouse position
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._cacheLeft = 0;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._cacheWidth = 0;
+
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._startColumn = -1;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._endColumn = -1;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._destColumn = -1;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._leftMovableBorder = -1;
+/** @private
+* @type {number}
+*/
+ColumnDraggingPlugin.prototype._rightMovableBorder = -1;
+/** @private
+* @type {boolean}
+*/
+ColumnDraggingPlugin.prototype._isDragging = false;
+/** @private
+* @type {boolean}
+*/
+ColumnDraggingPlugin.prototype._lockFrozen = false;
+/** @private
+* @type {boolean}
+*/
+ColumnDraggingPlugin.prototype._disabled = false;
+/** @private
+* @type {boolean}
+*/
+ColumnDraggingPlugin.prototype._noColumnMoving = false;
+/** @private
+* @type {boolean}
+*/
+ColumnDraggingPlugin.prototype._noDragBox = false;
+/** @type {string}
+* @private
+*/
+ColumnDraggingPlugin._styles = ""; // Static variable
+/** @private
+* @type {Object}
+*/
+ColumnDraggingPlugin.prototype._dragUI = null;
+
+/** @public
+* @return {string}
+*/
+ColumnDraggingPlugin.prototype.getName = function () {
+	return "ColumnDraggingPlugin"; // Read Only
+};
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+ColumnDraggingPlugin.prototype.hasMultiTableSupport = function () {
+	return true;
+};
+
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+ColumnDraggingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) {
+		return;
+	}
+
+	this._hosts.push(host);
+	host.unloadPlugin("DragAndDropTitlePlugin");
+
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("dragstart", preventDefault);
+
+	this.config(options);
+
+	this._dragUI = new DragUI({
+		dragBox: this._dragBox,
+		dragBoxIcon: this._dragBoxIcon
+	});
+
+	// Share dragging styles
+	if(DragUI.stylePromise) {
+		DragUI.applyThemeColor(host);
+	} else {
+		DragUI.stylePromise = ElfUtil.getThemeColors();
+		DragUI.stylePromise.then(this._onThemeLoaded);
+	}
+};
+/** @public
+* @param {Object=} host core grid instance
+*/
+ColumnDraggingPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if (at < 0) {
+		return;
+	}
+
+	this._hosts.splice(at, 1);
+	host.unlisten("mousedown", this._onMouseDown);
+
+	if(!this._hosts.length) {
+		if(this._dragPulseId) {
+			window.clearInterval(this._dragPulseId);
+			this._dragPulseId = 0;
+		}
+	}
+
+	this._dispose();
+};
+
+/** @private
+* @param {Object} colors
+*/
+ColumnDraggingPlugin.prototype._onThemeLoaded = function(colors) {
+	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
+	for(var i = this._hosts.length; --i >= 0;) {
+		DragUI.applyThemeColor(this._hosts[i]);
+	}
+};
+
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+ColumnDraggingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	var noColumnDragging = options["noColumnDragging"];
+	if (noColumnDragging == null && options["columnReorder"] != null) {
+		noColumnDragging = !options["columnReorder"];
+	}
+	if (noColumnDragging != null) {
+		this._disabled = noColumnDragging ? true : false;
+	}
+
+	var extOptions = options.columnDragging;
+	if (!extOptions) { return; }
+
+	if (typeof extOptions["dragBoxRenderer"] === "function") {
+		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		this._dragBox.className = "drag-box";
+	}
+	this.addListener(extOptions, "dragStart");
+	this.addListener(extOptions, "drag");
+	this.addListener(extOptions, "dragEnd");
+	this.addListener(extOptions, "preColumnMoved");
+	this.addListener(extOptions, "columnMoved");
+	this.addListener(extOptions, "dragInterval");
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ColumnDraggingPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	if(this._disabled) {
+		obj.noColumnDragging = true;
+	}
+
+	var extOptions = obj.columnDragging;
+	if(!extOptions) {
+		extOptions = obj.columnDragging = {};
+	}
+
+	return obj;
+};
+
+/**
+* Lock moving of frozen column. If true is spsecified, dragging is disabled for frozen column.
+* @public
+* @param {boolean} lock
+*/
+ColumnDraggingPlugin.prototype.lockFrozenColumn = function(lock) {
+	this._lockFrozen = lock;
+};
+
+/** Disable this plugin entirely
+* @public
+* @param {boolean=} opt_disabled
+*/
+ColumnDraggingPlugin.prototype.disable = function(opt_disabled) {
+	this._disabled = opt_disabled !== false;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} opt_disabled
+*/
+ColumnDraggingPlugin.prototype.disableMoving = function(opt_disabled) {
+	this._noColumnMoving = opt_disabled !== false;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} opt_disabled
+*/
+ColumnDraggingPlugin.prototype.disableDragBox = function(opt_disabled) {
+	this._noDragBox = opt_disabled !== false;
+};
+
+/** @private
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnDraggingPlugin.prototype._isAllowed = function(colIndex) {
+	var host = this._clickedGrid || this._hosts[0];
+	if (host) {
+		var stationaryIndex = host.getStationaryColumnIndex();
+		if (stationaryIndex < 0) {
+			return true;
+		}
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+	return true;
+};
+/** @private
+* @param {Event} e
+*/
+ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
+	if(this._disabled) {
+		return;
+	}
+	if(e.shiftKey || e.ctrlKey || e.altKey) {
+		return; // Ignore mousedown event, if modifier key is detected
+	}
+	if(e.button) {
+		return; // We don't allow drag with middle click (button == 1), or right click (button == 2)
+	}
+	if(this._timerId) {
+		return; // Drag timer is already start
+	}
+
+	var host = this.getRelativeGrid(e);
+	if(!host) {
+		return; // Given event should be within grid element
+	}
+
+	this._pos = host.getRelativePosition(e);
+	if (this._pos["hit"] === false) {
+		return; // Only start dragging when mouse is down on the grid
+	}
+
+	var section = /** @type{ILayoutGrid} */(this._pos["section"]);
+	if(!section) {
+		return; // The section that is not in the target section list cannot be dragged
+	} else if(this._pos["sectionType"] !== "title") {
+		return; // Sections other than title section cannot be dragged by default
+	}
+
+	var colIndex = this._pos["colIndex"];
+	if(!this._isAllowed(colIndex)) {
+		return; // The column cannot be dragged
+	}
+	if(this._lockFrozen && host.isPinnedColumn(colIndex)) {
+		return; // If the lock frag is on, frozen columns cannot be dragged
+	}
+
+	var rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
+	var movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
+	var movingColumns = this._getSpan(colIndex, rowIndex, section);
+
+	this._clickedGrid = host;
+	this._clickedSection = section;
+	this._clickedRow = rowIndex;
+
+	this._startColumn = movingColumns["left"];
+	this._endColumn = movingColumns["right"];
+	this._leftMovableBorder = movableBorder["left"];
+	this._rightMovableBorder = movableBorder["right"];
+	this._destColumn = this._startColumn;
+	this._timerId = setTimeout(this._onDragStart, 300);
+	window.addEventListener("mouseup", this._onMouseUp, false);
+};
+/** @private
+* @param {Object} e
+*/
+ColumnDraggingPlugin.prototype._onMouseUp = function (e) {
+	if(this._timerId) {
+		window.clearTimeout(this._timerId);
+		window.removeEventListener("mouseup", this._onMouseUp, false);
+		this._timerId = 0;
+		this._clearCache();
+	}
+};
+
+/** @private
+* @param {*} e
+*/
+ColumnDraggingPlugin.prototype._onDragStart = function (e) {
+	if(this._disabled || this._isDragging) { return; }
+	if (this.hasListener("dragStart")) {
+		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
+	}
+
+	if (this._pos["cancel"]) {
+		return;
+	}
+
+	this._timerId = 0;
+	window.removeEventListener("mouseup", this._onMouseUp, false);
+
+	if(!this._clickedGrid) {
+		return;
+	}
+
+	this._isDragging = true;
+	document.body.classList.add("tr-dragging"); // Prevent text selection
+	// document.body.classList.add("tr-move-cursor");
+
+	window.addEventListener("mousemove", this._onDrag, false); // TODO: support touch operation
+	window.addEventListener("mouseup", this._onDragEnd, true);
+
+	var host = this._clickedGrid;
+	var height = host.getHeight();
+	var sectionBound =  this._clickedSection.getBoundingClientRect();
+	var clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
+
+	var gridElem = host.getElement();
+	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
+	this._guideline.style.height = (height - 1) + "px";
+
+	// TODO: guideline and drag box should be outside of grid area
+	gridElem.parentNode.classList.add("mouse-dragging"); // change cursor
+
+
+	// TODO: guideline and drag box should be outside of grid area
+	gridElem.appendChild(this._guideline);
+
+	if (this._dragBoxRenderer) { // For custom drag box rendering
+		var arg = cloneObject(e); // TODO: Check if cloning is necessary
+		var id = this.getColumnId(this._startColumn);
+		var index = this.getColumnIndex(id);
+		var field = this._getField(this._startColumn);
+
+		arg.dragBox = this._dragBox;
+		arg.columnData = {
+			index: index,
+			field: field,
+			id: id
+		};
+		this._dragBoxRenderer(arg);
+	}
+	this._dimCol(true);
+	this._renderGuideline();
+
+	// For step scrolling // TODO: Merge this logic with DraggableContentPlugin
+	this._scrollStep = Math.floor(host.getScrollWidth() / 25); // Update the scrollbar first
+	if(this._scrollStep < 40) {
+		this._scrollStep = 40;
+	} else if(this._scrollStep > 400) {
+		this._scrollStep = 400;
+	}
+	var scrollbar = host.getHScrollbar();
+	this._cacheLeft = scrollbar.getLeft() + 20;
+	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
+
+	this._dragPulseId = window.setInterval(this._onDragPulse, 150); // Start pulse
+};
+/** @private
+* @param {Event} e
+*/
+ColumnDraggingPlugin.prototype._onDrag = function (e) {
+	if(!this._isDragging) { return; }
+
+	preventDefault(e);
+	this._pos = this._clickedGrid.getRelativePosition(e); // Relative to the clicked grid
+
+	var	host = this.getRelativeGrid(e);
+	if (!host || host !== this._clickedGrid) { return; }
+
+	var colIndex = this._pos["colIndex"];
+	if ((colIndex >= this._leftMovableBorder) &&
+		(colIndex <= this._rightMovableBorder) &&
+		this._isAllowed(colIndex) &&
+		!(this._lockFrozen && host.isPinnedColumn(colIndex))) {
+		e.dragBox = this._dragBox;
+		this._renderGuideline();
+		this._dispatch("drag", /** @type{!Object} */(e));
+	}
+	if(!this._noDragBox) {
+		var drop = this._dragUI.renderDragBox(e, this._clickedGrid);
+		if(!drop) { // can not be drop or not allow to drop or insertion
+			this._pos["cancel"] = true;
+		}
+	}
+};
+/** @private
+* @param {Event} e
+*/
+ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
+	if(!this._isDragging) {
+		return;
+	}
+
+	this._isDragging = false;
+	document.body.classList.remove("tr-dragging");
+	// document.body.classList.remove("tr-move-cursor");
+	this._dimCol(false);
+
+	var pn = this._guideline.parentNode;
+	if(pn) {
+		pn.removeChild(this._guideline);
+	}
+
+	pn = this._dragBox.parentNode;
+	if(pn) {
+		pn.removeChild(this._dragBox);
+	}
+	this._clickedGrid.getElement().parentNode.classList.remove("mouse-dragging"); // retain mouse cursor
+
+	window.removeEventListener("mousemove", this._onDrag, false);
+	window.removeEventListener("mouseup", this._onDragEnd, true);
+
+	if(this._dragPulseId) {
+		window.clearInterval(this._dragPulseId);
+		this._dragPulseId = 0;
+	}
+	var destPos = this._pos;
+	this._pos = null;
+
+	preventDefault(e);
+	var operationCancelled = false;
+	if(destPos["cancel"]) {
+		operationCancelled = true;
+	}
+
+	//When move to the right, the first position is the current one.
+	if (this._destColumn > this._startColumn) {
+		--this._destColumn;
+	}
+	//Cancel moving if the destination column is the current column or not allowed column
+	if ((!this._destColumn && this._destColumn !== 0) || // undefined, NaN, null
+		this._destColumn < 0 ||
+		!this._isAllowed(this._destColumn) ||
+		(this._destColumn >= this._startColumn && this._destColumn <= this._endColumn)) {
+		operationCancelled = true;
+	}
+
+	var arg = null;
+
+	if(!operationCancelled) {
+		arg = {
+			"startColumnIndex": this._startColumn,
+			"destColumnIndex": this._destColumn
+		};
+		this._dispatch("preColumnMoved", arg);
+		if(arg["cancel"]) {
+			operationCancelled = true;
+		}
+	}
+
+	if (!operationCancelled) {
+		if (!this._noColumnMoving) {
+			var shiftStart = -1;
+			var shiftEnd = -1;
+			var moveSize = -1;
+			if (this._startColumn > this._destColumn) { //Move backward
+				shiftStart = this._destColumn;
+				shiftEnd = this._startColumn - 1;
+				moveSize = -1 * (this._startColumn - this._destColumn); //Move to the left
+			} else
+			if (this._startColumn < this._destColumn) { //Move foward
+				shiftStart = this._endColumn + 1;
+				shiftEnd = this._destColumn;
+				moveSize = ((shiftEnd - shiftStart) + 1); //Move to the right
+			}
+
+			//Perform moving all columns in the range
+			for(var j = this._hosts.length; --j >= 0;) {
+				var host = this._hosts[j];
+				var i;
+				if (moveSize > 0) { //Move forward
+					for (i = this._startColumn; i <= this._endColumn; i++) {
+						host.moveColumn(this._startColumn, this._destColumn);
+					}
+				} else { //Move backward
+					for (i = this._startColumn; i <= this._endColumn; i++) {
+						host.moveColumn(this._startColumn + (i - this._startColumn), this._destColumn + (i - this._startColumn));
+					}
+				}
+			}
+		}
+
+		if (this.hasListener("columnMoved")) {
+			this._dispatch("columnMoved", {
+				"startColumnIndex": this._startColumn,
+				"endColumnIndex": this._endColumn,
+				"destColumnIndex": this._destColumn,
+				"clickedRow": this._clickedRow
+			});
+		}
+	}
+
+	this._dispatch("dragEnd", destPos || {}); // Always fire drag end for client to clean up its resource
+	this._clearCache();
+};
+
+/** @private
+*/
+ColumnDraggingPlugin.prototype._onDragPulse = function() {
+	if(!this._isDragging || !this._pos) { return; }
+
+	this._dispatch("dragInterval", /** @type{!Object} */(this._pos));
+
+	var host = this._clickedGrid;
+	if(!host || !host.getHScrollbar().isActive()) { return; }
+
+	var x = this._pos["x"];
+	var scrollVal = 0;
+	if(x < this._cacheLeft) {
+		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
+
+	} else if(x > this._cacheWidth) {
+		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
+	}
+
+	var len = this._hosts ? this._hosts.length : 0;
+	for(var i = 0; i < len; ++i) {
+		this._hosts[i].scrollRight(scrollVal);
+	}
+};
+/** @private
+*/
+ColumnDraggingPlugin.prototype._clearCache = function() {
+	this._startColumn = this._endColumn = this._destColumn = -1;
+
+	this._leftMovableBorder = this._rightMovableBorder = -1;
+
+	this._clickedRow = -1;
+	this._clickedSection = this._clickedGrid = null;
+};
+
+/** @private
+* @param {number} colIndex
+* @param {number} row
+* @param {ILayoutGrid} section
+* @return {!Object}
+*/
+ColumnDraggingPlugin.prototype._getSpan = function(colIndex, row, section) {
+	var cellSpan = section.getCellColSpan(colIndex, row);
+
+	if (cellSpan <= 0) { // The specified cell is being occupied
+		colIndex += cellSpan; // Convert the given negative index to the spanning cell
+		cellSpan = section.getCellColSpan(colIndex, row);
+	}
+
+	return { "left": colIndex, "right": (colIndex + cellSpan - 1) };
+};
+/** @private
+* @param {number} col
+* @param {number} row
+* @param {ILayoutGrid} section
+* @return {!Object}
+*/
+ColumnDraggingPlugin.prototype._findMoveableBorder = function(col, row, section) {
+	if (row < 0 || (!row && row !== 0)) { // Guaranteed to get out of infinite loop by checking undefined, NaN, null
+		return { "left": 0, "right": (section.getColumnCount() - 1) };
+	}
+	var span = this._getSpan(col, row, section);
+	if (span["right"] >= span["left"]) {
+		return span;
+	} else {
+		return this._findMoveableBorder(col, row - 1, section);
+	}
+};
+/**
+* @private
+*/
+ColumnDraggingPlugin.prototype._renderGuideline = function() {
+	var colIndex = this._pos["colIndex"];
+	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
+		return;
+	}
+
+	var currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
+	var colStart = currentSpan["left"]; // This can be different from colIndex
+	var colEnd = currentSpan["right"];
+	var colLeft = this._clickedGrid.getColumnLeft(colStart);
+	var colWidth = 0;
+	for(var i = colStart; i <= colEnd; ++i) {
+		colWidth += this._clickedGrid.getColumnWidth(i);
+	}
+
+	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
+	var destColumn = (rightHand) ? colEnd + 1 : colStart;
+
+	colLeft = this._clickedGrid.getColumnLeft(this._destColumn);
+	// If destination exceeds the specified bounds
+	if (destColumn < this._leftMovableBorder) {
+		destColumn = this._leftMovableBorder;
+	} else if (destColumn > this._rightMovableBorder) {
+		destColumn = this._rightMovableBorder + 1;
+		if(rightHand) {
+			colLeft -= 4; // Shift guideline to the left if this is the rightmost column
+		}
+	}
+
+	this._destColumn = destColumn;
+	this._guideline.style.left = colLeft + "px";
+};
+
+/**
+* @private
+* @param {boolean} inOut
+*/
+ColumnDraggingPlugin.prototype._dimCol = function(inOut) {
+	var host = this._clickedGrid;
+	var titleCell = host.getSection("title").getColumn(this._startColumn).getCell(0);
+	var titleCellEl = titleCell.getElement();
+	if(inOut) {
+		titleCellEl.classList.add("drag-indicator");
+	} else {
+		titleCellEl.classList.remove("drag-indicator");
+	}
+};
+
+
+
+export default ColumnDraggingPlugin;
+export { ColumnDraggingPlugin, ColumnDraggingPlugin as ColumnDragging, ColumnDraggingPlugin as ColumnDraggingExtension };