@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,968 @@
+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, deepEqual, injectCss, prettifyCss } 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}
+*/
+let ColumnDraggingPlugin = function (options) {
+	let 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._hosts = [];
+
+	t._guideline = document.createElement("div");
+	t._dragBox = document.createElement("div");
+	t._dragBox.classList.add("drag-box-disabled"); // defualt disable dragbox
+	t._dragBoxIcon = document.createElement("ef-icon");
+	t._dragBoxIcon.classList.add("drag-box-icon");
+
+	if(ElfUtil.getElfVersion() < 4) {
+		t._dragBox.classList.add("tr-dragbox");
+		t._guideline.classList.add("tr-guideline");
+	} else {
+		t._guideline.classList.add("guideline");
+	}
+
+	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 {Object}
+*/
+ColumnDraggingPlugin.prototype._startPos = null; // Cache of start column 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
+	});
+
+	ElfUtil.getThemeColors().then(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
+};
+/** @public
+* @param {Object=} host core grid instance
+*/
+ColumnDraggingPlugin.prototype.unload = function (host) {
+	let 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
+* @function
+* @param {Object} grid Core grid instance
+*/
+ColumnDraggingPlugin._onThemeLoaded = function(grid) {
+	if(!ColumnDraggingPlugin._styles) {
+		let styles = [
+			".multi-column-drag-indicator .section.title .cover-layer .column-bound.selection-bound ", [
+				"border-top: var(--grid-drag-indicator);",
+				"border-right: var(--grid-drag-indicator);",
+				"border-left: var(--grid-drag-indicator);"
+			],
+			".multi-column-drag-indicator .sections .cover-layer .column-bound.selection-bound ", [
+				"border-right: var(--grid-drag-indicator);",
+				"border-left: var(--grid-drag-indicator);",
+				"border-bottom: var(--grid-drag-indicator);"
+			]
+		];
+		ColumnDraggingPlugin._styles = prettifyCss(styles);
+	}
+
+	DragUI.initStyles();
+	ColumnDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
+};
+
+/** @private
+* @param {Object} grid Core grid instance
+*/
+ColumnDraggingPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._columnDraggingStyles) {
+		return;
+	}
+	if(ColumnDraggingPlugin._styles) {
+		grid._columnDraggingStyles = true; // Prevent loading the same style twice
+		injectCss(ColumnDraggingPlugin._styles, grid.getParent());
+	}
+};
+
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+ColumnDraggingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let noColumnDragging = options["noColumnDragging"];
+	if (noColumnDragging == null && options["columnReorder"] != null) {
+		noColumnDragging = !options["columnReorder"];
+	}
+	if (noColumnDragging != null) {
+		this._disabled = noColumnDragging ? true : false;
+	}
+
+	let extOptions = options.columnDragging;
+	if (!extOptions) { return; }
+
+	if (typeof extOptions["dragBoxRenderer"] === "function") {
+		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		this._dragBox.classList.add("drag-box");
+		this._dragBox.classList.remove("drag-box-disabled");
+	}
+	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) {
+	let obj = gridOptions || {};
+
+	if(this._disabled) {
+		obj.noColumnDragging = true;
+	}
+
+	let extOptions = obj.columnDragging;
+	if(!extOptions) {
+		extOptions = obj.columnDragging = {}; // TO_DO: This is unnecessary
+	}
+
+	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=} disabled
+*/
+ColumnDraggingPlugin.prototype.disable = function(disabled) {
+	this._disabled = disabled !== false;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDraggingPlugin.prototype.isDisabled = function() {
+	return this._disabled;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} disabled
+*/
+ColumnDraggingPlugin.prototype.disableMoving = function(disabled) {
+	this._noColumnMoving = disabled !== false;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} disabled
+*/
+ColumnDraggingPlugin.prototype.disableDragBox = function(disabled) {
+	this._noDragBox = disabled !== false;
+};
+
+/** @private
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnDraggingPlugin.prototype._isAllowed = function(colIndex) {
+	let host = this._clickedGrid || this._hosts[0];
+	if (host) {
+		let stationaryIndex = host.getStationaryColumnIndex();
+		if (stationaryIndex < 0) {
+			return true;
+		}
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+	return true;
+};
+/** @public
+* @description Emitate the mousedown event. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} x
+* @param {number} y
+*/
+ColumnDraggingPlugin.prototype.mockMousedown = function(colIndex, rowIndex, x, y) {
+	let evt = {
+		clientX: x,
+		clientY: y,
+		sectionType: "title"
+	};
+	evt = this._mockMouseEvent(colIndex, rowIndex, evt);
+	this._onMouseDown(evt);
+};
+/** @public
+* @description Emitate the mousemove event. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} x
+* @param {number} y
+*/
+ColumnDraggingPlugin.prototype.mockMousemove = function(colIndex, rowIndex, x, y) {
+	let evt = {
+		clientX: x,
+		clientY: y,
+		sectionType: "title"
+	};
+	evt = this._mockMouseEvent(colIndex, rowIndex, evt);
+	evt.path = [evt.target];
+	this._onDrag(evt);
+};
+/** @public
+* @description Emitate the mouseup event. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} x
+* @param {number} y
+*/
+ColumnDraggingPlugin.prototype.mockMouseup = function(colIndex, rowIndex, x, y) {
+	let evt = {
+		clientX: x,
+		clientY: y,
+		sectionType: "title"
+	};
+	evt = this._mockMouseEvent(colIndex, rowIndex, evt);
+	evt.path = [evt.target];
+	this._onMouseUp(evt);
+	this._onDragEnd(evt);
+};
+
+/** @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
+	}
+
+	let 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
+	}
+
+	let section = 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
+	}
+
+	let 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
+	}
+
+	let rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
+	let movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
+	let movingColumns = this._getSpan(colIndex, rowIndex, section);
+
+	this._clickedGrid = host;
+	this._clickedSection = section;
+	this._clickedRow = rowIndex;
+
+	this._startPos = this._pos;
+	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
+* @return {number} 0 does not allow dragging, 1 allows single dragging, and 2 allows multiple dragging with row selection =.
+*/
+ColumnDraggingPlugin.prototype._getDraggingStyle = function() {
+	let colSelExt = this._getPlugin("ColumnSelectionPlugin");
+	if(!colSelExt) {
+		return 1;
+	}
+	let cgp = this._getPlugin("ColumnGroupingPlugin");
+	let selectedCols = colSelExt.getSelectedColumns();
+	let dragOutSel = selectedCols.indexOf(this._startColumn) === -1;
+	if(dragOutSel) { // drag outside selected col, drag only 1 row
+		return 1;
+	}
+	let selectedColCount = selectedCols.length;
+	if(selectedColCount > 1) { // Multiple column drag
+		if(!cgp) {
+			return 2;
+		}
+		let currentGroup, prevGroup;
+		for (let i = 0; i < selectedColCount; i++) {
+			let colIndex = selectedCols[i];
+			currentGroup = cgp.getGroupIds(colIndex) || []; // empty array is root group
+			if(prevGroup && !deepEqual(currentGroup, prevGroup)) {
+				if(cgp.getMutualGroupId(selectedCols)) { // Dragging a group inside another group is permitted only when the group being dragged is the same parent group
+					return 2;
+				}
+				return 0; // Drag with difference group is not allowed
+			} // else {} // Drag with same group is allowed
+			prevGroup = currentGroup;
+		}
+	}
+	return 2;
+};
+
+/** @private
+* @param {*} e
+*/
+ColumnDraggingPlugin.prototype._onDragStart = function (e) {
+	if(this._disabled || this._isDragging) { return; }
+	if (this.hasListener("dragStart")) {
+		this._dispatch("dragStart", this._pos);
+	}
+
+	if (this._pos["cancel"]) { // user cancel drag start
+		return;
+	}
+
+	let dragStyles = this._getDraggingStyle();
+	if (!dragStyles) { // not allow to drag
+		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);
+
+	let host = this._clickedGrid;
+	let height = host.getHeight();
+	let sectionBound =  this._clickedSection.getBoundingClientRect();
+	let clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
+
+	let 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
+		let arg = cloneObject(e); // TODO: Check if cloning is necessary
+		let id = this.getColumnId(this._startColumn);
+		let index = this.getColumnIndex(id);
+		let field = this._getField(this._startColumn);
+
+		arg.dragBox = this._dragBox;
+		arg.columnData = {
+			index: index,
+			field: field,
+			id: id
+		};
+		this._dragBoxRenderer(arg);
+	}
+	if(dragStyles > 1 ) {
+		gridElem.parentNode.classList.add("multi-column-drag-indicator");
+	} else if(dragStyles === 1) {
+		this._dimCol(true); // Single drag
+	} // else {} // no need to handled drag 0 column
+	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;
+	}
+	let 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; }
+
+	let 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) {
+			this._dragUI.renderDragBox(e, this._clickedGrid);
+		}
+	}
+};
+/** @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);
+
+	let 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
+	this._clickedGrid.getElement().parentNode.classList.remove("multi-column-drag-indicator");
+
+	window.removeEventListener("mousemove", this._onDrag, false);
+	window.removeEventListener("mouseup", this._onDragEnd, true);
+
+	if(this._dragPulseId) {
+		window.clearInterval(this._dragPulseId);
+		this._dragPulseId = 0;
+	}
+	let destPos = this._pos;
+	this._pos = null;
+
+	preventDefault(e);
+	let operationCancelled = false;
+	if(destPos["cancel"]) {
+		operationCancelled = true;
+	}
+
+	if(!this._noDragBox && this._dragBoxIcon.icon === "void") {
+		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;
+	}
+
+	let 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) {
+			let colSelExt = this._getPlugin("ColumnSelectionPlugin");
+			let selectedCols;
+			if(colSelExt) {
+				selectedCols = colSelExt.getSelectedColumns();
+			}
+			if(!colSelExt || !selectedCols.length || selectedCols.indexOf(this._startColumn) === -1) {
+				// No selected column or move column outside selected column, tried to move only _startColumn
+				selectedCols = [this._startColumn];
+			}
+			let destIndex = this._destColumn;
+			// Move operation always move to the left of destination column
+			// When moving forward, destnation need to added by 1 to move correctly
+			if (this._startColumn < this._destColumn) {
+				destIndex = this._destColumn + 1;
+			}
+
+			this._moveColumns(selectedCols, destIndex);
+
+		}
+
+		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
+* @param {Array<number>} srcColIndices
+* @param {number} destColumnIndex
+*/
+ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColumnIndex) {
+	let srcCount = srcColIndices.length;
+	let colList = [];
+	let csp = this._getPlugin("ColumnStackPlugin");
+	let stackId, groupId;
+	let i;
+	if(srcCount === 1) {
+		if(csp) {
+			stackId = csp.getStackId(this._startColumn);
+		}
+		let cgp = this._getPlugin("ColumnGroupingPlugin");
+		if(cgp){
+			let cellInfo = cgp.getCellInfo(this._startPos);
+			groupId = cellInfo["groupId"] || cellInfo["columnId"];
+		}
+
+		if(stackId && this._startColumn === this._endColumn){
+			csp.moveStack(stackId, destColumnIndex);
+		} else if(groupId) {
+			cgp.moveGroup(groupId, destColumnIndex);
+		} else {
+			for(i = this._startColumn; i <= this._endColumn; i++){
+				colList.push(i);
+			}
+		}
+	} else {
+		let stacking = {}; // Object to optimize call column stack api repeatly
+		for (i = 0; i < srcCount; i++) {
+			let srcIdx = srcColIndices[i];
+
+			if(csp) {
+				stackId = csp.getStackId(srcIdx);
+			}
+			if(stackId && !stacking[stackId]) {
+				stacking[stackId] = true; // optimize column same stack
+				let stackMemberIds = csp.getStackMemberIds(stackId);
+				for (let j = 0; j < stackMemberIds.length; j++) {
+					let colId = stackMemberIds[j];
+					colList.push(colId);
+				}
+			} else {
+				let srcId = this.getColumnId(srcIdx);
+				colList.push(srcId); // Normal case
+			}
+		}
+	}
+	for(i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		host.reorderColumns(colList, destColumnIndex);
+	}
+};
+
+/** @private
+*/
+ColumnDraggingPlugin.prototype._onDragPulse = function() {
+	if(!this._isDragging || !this._pos) { return; }
+
+	this._dispatch("dragInterval", this._pos);
+
+	let host = this._clickedGrid;
+	if(!host || !host.getHScrollbar().isActive()) { return; }
+
+	let x = this._pos["x"];
+	let 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()));
+	}
+
+	let len = this._hosts ? this._hosts.length : 0;
+	for(let i = 0; i < len; ++i) {
+		this._hosts[i].scrollRight(scrollVal);
+	}
+};
+/** @private
+*/
+ColumnDraggingPlugin.prototype._clearCache = function() {
+	this._startColumn = this._endColumn = this._destColumn = -1;
+	this._startPos = null;
+
+	this._leftMovableBorder = this._rightMovableBorder = -1;
+
+	this._clickedRow = -1;
+	this._clickedSection = this._clickedGrid = null;
+	this._dragBoxIcon.icon = null;
+};
+
+/** @private
+* @param {number} colIndex
+* @param {number} row
+* @param {ILayoutGrid} section
+* @return {!Object}
+*/
+ColumnDraggingPlugin.prototype._getSpan = function(colIndex, row, section) {
+	let 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) };
+	}
+	let 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() {
+	let colIndex = this._pos["colIndex"];
+	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
+		return;
+	}
+
+	let currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
+	let colStart = currentSpan["left"]; // This can be different from colIndex
+	let colEnd = currentSpan["right"];
+	let colLeft = this._clickedGrid.getColumnLeft(colStart);
+	let colWidth = 0;
+	for(let i = colStart; i <= colEnd; ++i) {
+		colWidth += this._clickedGrid.getColumnWidth(i);
+	}
+
+	let rightHand = this._pos["x"] > colLeft + colWidth / 2;
+	let destColumn = (rightHand) ? colEnd + 1 : colStart;
+
+	let csp = this._getPlugin("ColumnStackPlugin");
+	if(csp){
+		let stackId = csp.getStackId(destColumn);
+		if(stackId){
+			let members = csp.getStackMemberIndices(stackId);
+			let memberCount = members.length;
+			if(members && memberCount){
+				destColumn = rightHand ? members[memberCount - 1] + 1 : members[0];
+			}
+		}
+	}
+
+	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) {
+	let host = this._clickedGrid;
+	let titleCell = host.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow);
+	let 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 };