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

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -0,0 +1,1479 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} RowDraggingPlugin~Options
+* @description Available options describing `rowDragging` object specified in grid's option
+* @property {boolean=} dragBox=false If enabled, information box will be shown during the drag
+* @property {boolean=} disabled=false A flag to turn off UIs, while events will still be dispatched. If enabled, guileline and drag box will be hidden. autoScroll will also be turned off.
+* @property {boolean=} mouseInput=true If disabled, mousemove/mousedown will not trigger the drag operation.
+* @property {boolean=} dataTransfer=true If disabled, internal row data will not be moved at the end of the drag operation.
+* @property {boolean=} autoScroll=true If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.
+* @property {Function=} dragBoxRenderer Allow user to customize dragBox
+* @property {Function=} dragStart=null Function handler for dragStart event
+* @property {Function=} drag=null Function handler for drag event
+* @property {Function=} dragEnd=null Function handler for dragEnd event. This event is for clearing any resource hold during the drag operation
+* @property {Function=} dataMoved=null Function handler for dataMoved event
+* @property {Function=} beforeDataMoved=null Function handler for beforeDataMoved event
+*/
+
+/** @event RowDraggingPlugin#drag
+* @description Fired on each mousemove or touchmove
+* @type {Object}
+*/
+/** @event RowDraggingPlugin#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 RowDraggingPlugin#dragEnd
+* @description The event will always be fired at the end of the drag operation. This is to allow clearing of any resource used during the drag operation
+* @type {Object}
+* @property {number} rowIndex The current or final position of the first dragged row after the move. Negative row index is returned when there is no moved row
+
+*/
+/** @event RowDraggingPlugin#dragInterval
+* @description Fired at an interval during drag
+* @type {Object}
+*/
+/** @event RowDraggingPlugin#dataMoved
+* @description Fired when rows or data are moved by the drag operation. This happens before dragEnd event
+* @type {Object}
+* @property {number} rowIndex The current or final position of the first dragged row after the move. Use srcRowIds to determine the row positions in case of dragging multiple rows.
+* @property {Array.<number>} srcRowIndices Row indices of the selected rows. The values represent the indices before the move and cannot be used for referencing
+* @property {Array.<string>} srcRowIds Row ids of the selected rows
+* @property {Array.<string>} srcRowTypes Row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex Row index of the drop area. The value represents row index before the move and cannot be used for referencing
+* @property {string} destRowId Row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType Row type of the drop area. This will be empty string for the end of grid
+*/
+/** @event RowDraggingPlugin#beforeDataMoved
+* @description Fired after mouseup and before the data/row is about to be moved. You can check the current drag and drop states, cancel operation, or apply custom tasks in this event.
+* @type {Object}
+* @property {number} rowIndex Row index of the first row to be dragged
+* @property {Array.<number>} srcRowIndices Row indices of the selected rows
+* @property {Array.<string>} srcRowIds Row ids of the selected rows
+* @property {Array.<string>} srcRowTypes Row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex Row index of the drop area
+* @property {string} destRowId Row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType Row type of the drop area. This will be empty string for the end of grid
+* @property {boolean=} cancel Set this property to true to cancel the default operation (data moving)
+* @example
+* beforeDataMoved: function(e) {
+*   let srcRowType = e.srcRowTypes[0];
+*   let destRowType = e.destRowType;
+*   if(srcRowType === "GROUP_MEMBER" && destRowType === "CONTENT") {
+*     e.cancel = true; // Prevent a group member row from moving outside of its own group
+*   }
+* }
+*/
+
+
+/** @private
+* @param {Object} pos
+* @return {boolean}
+*/
+let _isInContentSection = function (pos) {
+	if(pos) {
+		if(pos["sectionType"] === "content") {
+			return pos["sectionName"] !== "bottomPadding";
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {string} rowType
+* @return {boolean}
+*/
+let _isNormalRowType = function (rowType) {
+	if(rowType) {
+		if(rowType === "CONTENT") {
+			return true;
+		}
+		if(rowType === "CHAIN") {
+			return true;
+		}
+		if(rowType === "GROUP_HEADER") {
+			return true;
+		}
+		return false;
+	} else {
+		return true;
+	}
+};
+
+/** @private
+* @param {Object} api
+* @param {number|string} rowRef
+* @returns {string}
+*/
+let _getRowType = function (api, rowRef) {
+	if(api) {
+		if(api.getRowType) {
+			return api.getRowType(rowRef);
+		}
+	}
+	return "CONTENT";
+};
+
+/** @constructor
+* @param {RowDraggingPlugin.Options=} options
+* @extends {GridPlugin}
+*/
+let RowDraggingPlugin = function (options) {
+	let t = this;
+
+	t.startDrag = t.startDrag.bind(t);
+	t.stopDrag = t.stopDrag.bind(t);
+	t._clearCache = t._clearCache.bind(t);
+
+	t._onMouseDown = t._onMouseDown.bind(t);
+
+	t._onDragPulse = t._onDragPulse.bind(t);
+
+	t._onDragStart = t._onDragStart.bind(t);
+	t._onMouseMove = t._onMouseMove.bind(t);
+	t._onDragEnd = t._onDragEnd.bind(t);
+
+	t._onJETDrop = t._onJETDrop.bind(t);
+	t._onJETDragOver = t._onJETDragOver.bind(t);
+	t._delayStart = t._delayStart.bind(t);
+	t._onMouseOut = t._onMouseOut.bind(t);
+
+	t._hosts = [];
+
+	t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
+	t._guideline.className = "tr-row-guideline";
+
+	t._dragBox = document.createElement("div");
+	t._dragBox.className = "drag-box-disabled";
+
+	t._dragBoxIcon = document.createElement("ef-icon");
+	t._dragBoxIcon.className = "drag-box-icon";
+
+	if(options) {
+		t.config({ "rowDragging": options });
+	}
+};
+Ext.inherits(RowDraggingPlugin, GridPlugin);
+
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin._styles = ""; // Static variable
+/** @type {Promise<Object>}
+* @private
+*/
+RowDraggingPlugin._stylePromise = null; // Static variable
+
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._guideline = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBox = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxIcon = null;
+/** For disabling UIs
+* @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._uiDisabled = false;
+/** For disabling drag and drop functionalities
+* @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._disabled = false;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragTarget = null;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxRenderer = null;
+/** @type {*}
+* @private
+*/
+RowDraggingPlugin.prototype._legacyRowReorder = null;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._pos = null;
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin.prototype._startingRid = "";
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin.prototype._startingRowType = "";
+/** Core grid instance
+* @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._startingGrid = null;
+
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._dragPulseId = 0;
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._topBound = 0; // For drag pulse
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._btmBound = 0; // For drag pulse
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._scrollStep = 40; // For drag pulse
+
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dragging = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._scrollingZone = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._touchMode = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._mouseInput = true;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxEnabled = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dataTransfer = true;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._autoScroll = true;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragUI = null;
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._timerId = 0;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetDnD = false;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._jetDragContent = null;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetContentHasRic = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._jetContentHasField = false;
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin.prototype._entryPoint = "";
+
+/** Prevent built-in config
+* @public
+* @ignore
+* @param {string} optionName
+* @param {*} optionValue
+* @return {*}
+*/
+RowDraggingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
+	if (optionName === "rowReorder") {
+		this._legacyRowReorder = optionValue;
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+
+/** Plugin can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @override
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+
+/** @public
+* @return {string}
+*/
+RowDraggingPlugin.prototype.getName = function () {
+	return "RowDraggingPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid instance
+* @param {Object} options
+*/
+RowDraggingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	this.config(options);
+
+	if (this._mouseInput) {
+		host.setAttribute("draggable", "true");
+		host.listen("dragstart", this.startDrag);
+	}
+
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("touchstart", this._onMouseDown);
+
+	this._dragUI = new DragUI({
+		dragBox: this._dragBox,
+		dragBoxIcon: this._dragBoxIcon
+	});
+
+	ElfUtil.getThemeColors().then(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
+
+	// In case of lazy loading
+	// host.getAllSections("content").forEach(this._registerSection);
+};
+/** @public
+* @param {Object} host core grid instance
+*/
+RowDraggingPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	// host.removeAttribute("draggable");
+	host.unlisten("dragstart", this.startDrag);
+	host.unlisten("mousedown", this._onMouseDown);
+	host.unlisten("touchstart", this._onMouseDown);
+
+	this._hosts.splice(at, 1);
+	if (!this._hosts.length) {
+		window.removeEventListener("mousemove", this._onMouseMove, false);
+		window.removeEventListener("touchmove", this._onMouseMove, false);
+		window.removeEventListener("mouseup", this._onDragEnd, false);
+		window.removeEventListener("touchend", this._onDragEnd, false);
+		window.removeEventListener("touchcancel", this._onDragEnd, false);
+
+		this._clearCache();
+	}
+	if(this._timerId) {
+		clearTimeout(this._timerId);
+		this._timerId = 0;
+	}
+	this._dispose();
+};
+
+/** @private
+* @function
+* @param {Object} grid Core grid instance
+*/
+RowDraggingPlugin._onThemeLoaded = function(grid) {
+	if(!RowDraggingPlugin._styles) {
+		let styles = [
+			":host .row-dragging .cover-layer .selection-bound", [
+				"border: var(--grid-drag-indicator)"
+			],
+			":host .row-dragging .tr-lg .cell.selected-row", [
+				"background-color: unset;"
+			]
+		];
+		RowDraggingPlugin._styles = prettifyCss(styles);
+	}
+
+	DragUI.initStyles();
+	RowDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+RowDraggingPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._rowDraggingStyles) {
+		return;
+	}
+	if(RowDraggingPlugin._styles) {
+		grid._rowDraggingStyles = true; // Prevent loading the same style twice
+		injectCss(RowDraggingPlugin._styles, grid.getParent());
+	}
+};
+
+/** @public
+* @param {Object=} options Grid model object
+*/
+RowDraggingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let extOptions = options["rowDragging"] || this._legacyRowReorder;
+	if (!extOptions) {
+		return;
+	}
+
+	if (typeof extOptions["dragBoxRenderer"] === "function") {
+		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		let className = "drag-box";
+		if (ElfUtil.getElfVersion() < 3) {
+			className = "tr-dragbox content-dragging"; // Keep backward compatibility
+		}
+		this._dragBox.className = className;
+	} else {
+		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
+	}
+
+	this._dragBoxEnabled = !!extOptions["dragBox"];
+
+	let val = extOptions["mouseInput"];
+	if (val != null) {
+		this._mouseInput = !!val;
+	}
+	val = extOptions["dataTransfer"];
+	if (val != null) {
+		this._dataTransfer = !!val;
+	}
+	val = extOptions["autoScroll"];
+	if (val != null) {
+		this._autoScroll = !!val;
+	}
+
+	if (extOptions["disabled"]) {
+		this._uiDisabled = true;
+	}
+
+	this.addListener(extOptions, "dragStart");
+	this.addListener(extOptions, "drag");
+	this.addListener(extOptions, "dragEnd");
+	this.addListener(extOptions, "dataMoved");
+	this.addListener(extOptions, "beforeDataMoved");
+};
+
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
+	let obj = out_obj || {};
+
+	let extOptions = obj.rowDragging;
+	if(!extOptions) {
+		extOptions = obj.rowDragging = {};
+	}
+
+	if(this._dragBoxEnabled) {
+		extOptions.dragBox = this._dragBoxEnabled;
+	}
+	if(!this._mouseInput) {
+		extOptions.mouseInput = this._mouseInput;
+	}
+	if(!this._autoScroll) {
+		extOptions.autoScroll = this._autoScroll;
+	}
+	if(!this._dataTransfer) {
+		extOptions.dataTransfer = this._dataTransfer;
+	}
+	if(this._uiDisabled) {
+		extOptions.disabled = this._uiDisabled;
+	}
+
+	return obj;
+};
+
+/** Drag start to simulate "dragStart" event for testing purpose
+* @ignore
+* @param {number} rowIndex
+* @param {*=} mouseEvt
+*/
+RowDraggingPlugin.prototype.dragStart = function (rowIndex, mouseEvt) {
+	// dragstart event
+	if(!mouseEvt) {
+		mouseEvt = {};
+	}
+	mouseEvt["type"] = "dragstart";
+	let core = this._hosts[0];
+	let cell = core ? core.getCell("content", 0, rowIndex) : null;
+	mouseEvt.target = cell ? cell.getElement() : null;
+	this._onMouseDown(mouseEvt);
+	this.startDrag(mouseEvt);
+};
+
+/** Move mouse to drag cell for testing purpose
+* @public
+* @ignore
+* @param {number} rowIndex
+* @param {*=} mouseEvt
+*/
+RowDraggingPlugin.prototype.dragMove = function (rowIndex, mouseEvt) {
+	let core = this._hosts[0];
+	if(!core) {
+		return; // Extension has been disposed
+	}
+
+	// mousemove, touchmove event
+	if(!mouseEvt) {
+		mouseEvt = {};
+	}
+	mouseEvt["type"] = "mousemove";
+	mouseEvt["which"] = 1; // Simulation of mouse down and move
+	let cell = core.getCell("content", 0, rowIndex);
+	let cellRelativePosition = core.getRelativePosition(cell); // get relative position of cell only when dragging for calculate dragBox
+
+	mouseEvt.clientX = cellRelativePosition.x;
+	mouseEvt.pageY = cellRelativePosition.y;
+	mouseEvt.target = cell ? cell.getElement() : null;
+	mouseEvt.stopPropagation = function() {};
+	mouseEvt.preventDefault = function() {};
+	this._onMouseMove(mouseEvt);
+};
+
+/** Mouse up to end of drag for testing purpose
+* @public
+* @ignore
+* @param {number} rowIndex
+* @param {*=} mouseEvt
+*/
+RowDraggingPlugin.prototype.dragEnd = function (rowIndex, mouseEvt) {
+	// mouseup, touchend, touchcancel event
+	if(!mouseEvt) {
+		mouseEvt = {};
+	}
+	mouseEvt["type"] = "mouseup";
+	let core = this._hosts[0];
+	let cell = core ? core.getCell("content", 0, rowIndex) : null;
+	mouseEvt.target = cell ? cell.getElement() : null;
+	mouseEvt.stopPropagation = function() {};
+	mouseEvt.preventDefault = function() {};
+	this._onDragEnd(mouseEvt);
+};
+
+/** @public
+* @param {*=} startRef
+*/
+RowDraggingPlugin.prototype.startDrag = function (startRef) {
+	this._startDrag(false, startRef); // Start without delay start
+};
+/** @public */
+RowDraggingPlugin.prototype.stopDrag = function () {
+	this.cancelDrag(); // Cancel drag if this method is called on dragStart event
+	if(this._dragging) {
+		this._onDragEnd();
+	}
+};
+/** @public */
+RowDraggingPlugin.prototype.cancelDrag = function () {
+	if (this._pos) { this._pos["cancel"] = true; }
+};
+
+/** @public
+* @return {Element}
+*/
+RowDraggingPlugin.prototype.getGuideline = function () {
+	return this._guideline;
+};
+
+/** Disable drag and drop functionality. Unlike disableUIs method, no events will be triggered or dispatched by user actions.
+* This method is useful for temporary turnning off drag and drop functionalities.
+* @public
+* @param {boolean=} disabled
+* @see {@link RowDraggingPlugin#disable}
+*/
+RowDraggingPlugin.prototype.disable = function (disabled) {
+	this._disabled = disabled !== false;
+};
+/** @public
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.isDisabled = function () {
+	return this._disabled;
+};
+/** Disable UIs, while events will still be triggered by user actions. This method modify `disabled` property on the configuration object.
+* This method is useful for customizing UIs during the drag operations.
+* @public
+* @param {boolean=} disabled
+* @see {@link RowDraggingPlugin#disable}
+*/
+RowDraggingPlugin.prototype.disableUIs = function (disabled) {
+	this._uiDisabled = disabled !== false;
+};
+
+/** @public
+* @param {boolean=} allowed
+*/
+RowDraggingPlugin.prototype.allowDrag = function (allowed) {
+	if(this._pos) {// WARNING: Please note that this method is intent to be used by client, and not for internal use
+		this._pos["invalidTarget"] = (allowed === false);
+	}
+};
+
+/** @public
+* @function
+* @param {boolean=} allowed
+*/
+RowDraggingPlugin.prototype.allowDrop = RowDraggingPlugin.prototype.allowDrag;
+
+/** @public
+* @param {*} content Element, Node, string, number, or everything else.
+*/
+RowDraggingPlugin.prototype.setDragContent = function (content) {
+	this._dragUI.setContent(content);
+};
+
+/** @public
+* @return {Element}
+*/
+RowDraggingPlugin.prototype.getDragBox = function () {
+	return this._dragBox;
+};
+
+/** @public
+* @return {string}
+*/
+RowDraggingPlugin.prototype.getDragSource = function () {
+	return this._entryPoint;
+};
+
+/** @public
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.isDragging = function () {
+	return this._dragging;
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowDraggingPlugin.prototype.disableDragging = function (disabled) {
+	this._disabled = disabled !== false;
+};
+
+/** @public
+* @param {boolean=} enabled
+*/
+RowDraggingPlugin.prototype.enableJETDragAndDrop = function (enabled) {
+	let val = enabled !== false;
+	if(this._jetDnD === val) { return; }
+
+	this._jetDnD = val;
+
+	let jet = window["JET"];
+	if (jet) {
+		//If ContainerDescription is undefined, that means JET is not initalized. Mostlikely the app
+		//is running the local development mode without container. Disable dnd in this case
+		if (jet["ContainerDescription"] && (jet["ContainerDescription"]["name"] !== "EikonNowContainer")) {
+			if (this._jetDnD) {
+				jet["onDrop"](this._onJETDrop);
+				jet["onDragOver"](this._onJETDragOver);
+				jet["onDragLeave"](this.stopDrag);
+			} else {
+				jet["onDrop"](null);
+				jet["onDragOver"](null);
+				jet["onDragLeave"](null);
+			}
+		} else {
+			this._jetDnD = false;
+		}
+	}
+};
+
+/** @public
+* @return {Object}
+*/
+RowDraggingPlugin.prototype.getJETDragContent = function () {
+	return this._jetDragContent;
+};
+
+/** @public
+* @param {Object} content
+*/
+RowDraggingPlugin.prototype.setJETDragContent = function (content) {
+	this._jetDragContent = content;
+
+	let tr = window["tr"];
+	let grid = (tr) ? tr["grid"] : null;
+	let JetDragContent = (grid) ? grid["JetDragContent"] : null;
+	if (content && JetDragContent) {
+		let jetDragContentMgr = new JetDragContent(content);
+		let rics = jetDragContentMgr["getRicsToDrop"]();
+		let fields = jetDragContentMgr["getFieldsToDrop"]();
+
+		this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
+		this._jetContentHasField = (fields && fields.length > 0) ? true : false;
+	} else {
+		this._jetContentHasRic = false;
+		this._jetContentHasField = false;
+	}
+};
+
+/** @private
+* @param {*} e
+* @return {!Object}
+*/
+RowDraggingPlugin.prototype._hitTest = function (e) {
+	let host = this.getRelativeGrid(e);
+	if (host) {
+		let pos;
+		if (e.changedTouches) {
+			// https://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-target-of-touchmove-javascript-event
+			let touchPos = e.changedTouches[0];
+			pos = host.getRelativePosition(
+				document.elementFromPoint(
+					touchPos.clientX, touchPos.clientY
+				)
+			);
+			Dom.getRelativePosition(touchPos, host.getElement(), pos); // Overwrite x and y property
+		} else {
+			pos = host.getRelativePosition(e);
+		}
+		return pos;
+	} else {
+		return /** @type{!Object} */(e || {});
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+RowDraggingPlugin.prototype._onMouseDown = function (e) {
+	if (e.changedTouches) {
+		this._touchMode = true;
+	}
+	this._dragTarget = /** @type{Element} */(e.target);
+	this._setEntryPoint("grid");
+};
+/** @private
+* @param {*=} e
+* @param {boolean=} fromJET
+*/
+RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
+	this._timerId = 0;
+
+	if (this._dragging) { return; }
+	if (!this._pos) { return; }
+
+	this._listenAbortActions(false); // Unlisen abort action
+
+	let useJetDragStart = false;
+	let jet = window["JET"];
+	if (fromJET) {
+		useJetDragStart = true;
+	} else {
+		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
+		if(this._isDragCancelled()) {
+			return; // User does not allow this drag to happen
+		}
+		if (jet && this._jetDnD && this._jetDragContent) {
+			useJetDragStart = true;
+			jet["dragStart"](this._jetDragContent);
+		}
+	}
+
+	this._dragging = true;
+	// Event listeners
+	document.body.classList.add("tr-dragging"); // Prevent text selection
+
+	if (!useJetDragStart) { // WARNING: JET wrongly intercepts all mouse events without app's consent
+		window.addEventListener("mousemove", this._onMouseMove, false);
+		window.addEventListener("touchmove", this._onMouseMove, false);
+	}
+	window.addEventListener("mouseup", this._onDragEnd, false);
+	window.addEventListener("touchend", this._onDragEnd, false);
+	window.addEventListener("touchcancel", this._onDragEnd, false);
+
+	if (this._touchMode) {
+		for (let i = this._hosts.length; --i >= 0;) {
+			let host = this._hosts[i];
+			host.getVScrollbar().disableTouchInput();
+			host.getHScrollbar().disableTouchInput();
+		}
+	}
+
+	// Update UI, grid cursor and guideline
+	if (!this._uiDisabled) { //disabledUI
+		let grid = this._pos["grid"] || null;
+		if (!grid) return;
+
+		if (this._dataTransfer) {
+			let rowIndex = this._pos["rowIndex"];
+			let dv = grid.getDataSource();
+			this._startingRid = dv.getRowId(rowIndex);
+			this._startingGrid = grid;
+			this._startingRowType = _getRowType(this.getGridApi(grid), rowIndex);
+
+			if (this._dragBoxRenderer) { // For custom drag box rendering
+				let arg = cloneObject(e); // TODO: Check if cloning is necessary
+				arg.dragBox = this._dragBox;
+				arg.dataRow = this._getRowData(dv.getRowDataAt(rowIndex));
+
+				if (this._legacyRowReorder) {
+					this._dragBoxRenderer(e, arg.dragBox, [arg.dataRow]);
+				} else {
+					this._dragBoxRenderer(arg);
+				}
+			}
+		}
+
+		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
+		// we should do something to overwrite pointer-events first
+		// then set cursor move will have an effect
+		let gridElem = grid.getElement();
+		gridElem.classList.add("mouse-dragging");
+		gridElem.classList.add("row-dragging");
+
+		this._updateGuidePosition();
+
+		if (this._autoScroll) {
+			let scrollbar = grid.getVScrollbar();
+			this._topBound = scrollbar.getTop() + 50;
+			this._btmBound = scrollbar.getTop() + scrollbar.getHeight() - 50;
+
+			if (this._topBound < this._btmBound) {
+				// For step scrolling
+				this._scrollStep = Math.floor(grid.getScrollHeight() / 25); // Update the scrollbar first
+				if (this._scrollStep < 40) {
+					this._scrollStep = 40;
+				} else if (this._scrollStep > 400) {
+					this._scrollStep = 400;
+				}
+				this._dragPulseId = setInterval(this._onDragPulse, 130); // Start pulse
+			}
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._onMouseMove = function (e) {
+	if (!this._dragging) { return; }
+
+	if (e.type != "touchmove") {
+		if (!e || (e.which !== 1)) { // Left click is not down. Support in IE9 and up
+			this.stopDrag();
+			return;
+		}
+		Dom.preventDefault(e);
+	}
+
+	let newPos = this._hitTest(e); // A new object is created
+	if(newPos["grid"]) { //Mouse is in grid area
+		if(_isInContentSection(this._pos) && this._pos["grid"] === newPos["grid"]) {
+			if(!_isInContentSection(newPos) || !(newPos["rowIndex"] >= 0)) { // Mouse is on un-dropable area
+				newPos = null;
+			}
+		}
+	}
+	if(newPos) {
+		this._pos = newPos;
+	} else {
+		newPos = this._pos;
+	}
+
+	newPos["dragBox"] = this._dragBox; // assign dragBox for user determine valid target
+
+	// need to check grid properties because row can be move outside the grid
+	if(this._shouldPreventDrop(newPos)) {
+		newPos.dragBoxIcon = "void";
+	}
+
+	let dropable = (this._entryPoint !== "JET" || this._jetContentHasRic);
+	if(dropable) {
+		this._updateGuidePosition(e);
+	}
+
+	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
+	this._dispatch("drag", newPos);
+	if(!this._uiDisabled && dropable) {
+		e.dragBoxIcon = newPos.dragBoxIcon; // access event object instread of element for prevent element persistence
+		let drop = this._dragUI.renderDragBox(e, this._startingGrid);
+		if(!drop) { // can not be drop or not allow to drop or insertion
+			this.cancelDrag();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._onDragEnd = function (e) {
+	if (!this._dragging) { return; }
+	this._dragging = false;
+
+	if(e) {
+		Dom.preventDefault(e);
+	}
+	Dom.removeParent(this._guideline);
+	Dom.removeParent(this._dragBox);
+
+	document.body.classList.remove("tr-dragging");
+
+	window.removeEventListener("mousemove", this._onMouseMove, false);
+	window.removeEventListener("touchmove", this._onMouseMove, false);
+	window.removeEventListener("mouseup", this._onDragEnd, false);
+	window.removeEventListener("touchend", this._onDragEnd, false);
+	window.removeEventListener("touchcancel", this._onDragEnd, false);
+
+	if (this._touchMode) {
+		for (let i = this._hosts.length; --i >= 0;) {
+			let host = this._hosts[i];
+			host.getVScrollbar().disableTouchInput(false);
+			host.getHScrollbar().disableTouchInput(false);
+		}
+	}
+
+	let srcGrid = this._startingGrid || this._hosts[0];
+
+	let srcGridElem = srcGrid.getElement();
+	srcGridElem.classList.remove("mouse-dragging");
+	srcGridElem.classList.remove("row-dragging");
+
+	let evtArg = {
+		rowIndex: -1
+	};
+	if(!this._isDragCancelled()) {
+		evtArg["srcGrid"] = srcGrid;
+		evtArg["dropTarget"] = e ? e.target : null; // WARNING: dropTarget is not correct for element in a shadow root
+
+		if (!this._jetDnD && this._dataTransfer && _isInContentSection(this._pos)) {
+			let destGrid = this._pos["grid"] || srcGrid; // this._pos is always valid at this point
+			let destRowIndex = this._pos["rowIndex"];
+
+			let rowSelection = srcGrid.getPlugin("RowSelectionPlugin");
+			let srcRowIndices = rowSelection && rowSelection.getSelectedRows();
+			if (!srcRowIndices || !srcRowIndices.length) {
+				// case no row selection or it disabled
+				srcRowIndices = this._startingRid; // Str Type
+			}
+
+			// evtArg["destGrid"] is filled in _moveRows
+			this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, evtArg);
+		}
+
+		evtArg["currentPosition"] = this._pos; // To support JET requirement
+		evtArg["data"] = this._jetDragContent;
+	} else {
+		evtArg["cancel"] = true;
+	}
+
+	this._dispatch("dragEnd", evtArg); // Always fire drag end for client to clean up its resource
+	this._clearCache();
+	this._jetDragContent = null;
+};
+
+/** Move multiple rows to the specified row index. The move results will be based on row type of the given rows. The behavior is the same as drag and drop operation from this extension.
+* @public
+* @param {Array.<number>} srcRowIndices Array of row indices from the source Grid (e.g., row index or row id)
+* @param {number} destRowIndex Destination row index
+* @param {Object=} srcGrid Core grid instance of the source rows
+* @param {Object=} destGrid Core grid instance of the destination
+* @return {number} Number of rows from the given rows that have been moved
+*/
+RowDraggingPlugin.prototype.moveRows = function (srcRowIndices, destRowIndex, srcGrid, destGrid) {
+	if(!srcGrid) {
+		srcGrid = this._startingGrid || this._hosts[0];
+		if(!srcGrid) {
+			return 0;
+		}
+	}
+	if(!destGrid) {
+		destGrid = srcGrid;
+	}
+
+	return this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, {});
+};
+/** @private
+* @param {Array.<number>|string} srcRowRef
+* @param {number} destRowIndex
+* @param {!Object} srcGrid core grid instance
+* @param {!Object} destGrid core grid instance
+* @param {!Object} evtArg
+* @return {number}
+*/
+RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
+	let srcRowIndices = null;
+	let srcDv = srcGrid.getDataSource();
+	let destDv = destGrid.getDataSource();
+	if(typeof srcRowRef === "string") {
+		let srcRowIndex = srcDv.getRowIndex(srcRowRef);
+		if(srcRowIndex >= 0) {
+			srcRowIndices = [srcRowIndex];
+		}
+	} else if(Array.isArray(srcRowRef)) {
+		if(srcRowRef.length) {
+			srcRowIndices = srcRowRef;
+		}
+	}
+
+	if(!srcRowIndices) {
+		return 0;
+	}
+
+	// Available row types are ["CONTENT", "CHAIN", "CONSTITUENT", "GROUP_HEADER", "SUBGROUP_HEADER", "GROUP_MEMBER"]
+	let i;
+	let srcCount = srcRowIndices.length;
+	let srcRowIds = new Array(srcCount);
+	let srcRowTypes = [];
+	let conRowType = "";
+	let api = this.getGridApi(srcGrid);
+	if(api && !api.getRowType) {
+		api = null;
+	}
+	for(i = 0; i < srcCount; ++i) {
+		let srcIndex = srcRowIndices[i];
+		let rowType = _getRowType(api, srcIndex);
+		srcRowIds[i] = srcDv.getRowId(srcIndex);
+		srcRowTypes[i] = rowType;
+		if(conRowType) {
+			if(conRowType !== rowType) {
+				conRowType = "MIXED";
+			} // TODO: Check if the GROUP_MEMBER coms from the same parent
+		} else {
+			conRowType = rowType;
+		}
+	}
+	if(!conRowType) {
+		conRowType = "CONTENT";
+	}
+	let destRowType = _getRowType(api, destRowIndex); // TODO: this has to be get from destGrid
+	let destRowId = destDv.getRowId(destRowIndex);
+	let destParentRowId = destDv.getSegmentParentRowId(destRowId);
+
+	evtArg["rowIndex"] = srcRowIndices[0];
+	evtArg["srcRowIndices"] = srcRowIndices;
+	evtArg["srcRowIds"] = srcRowIds;
+	evtArg["srcRowTypes"] = srcRowTypes;
+	evtArg["consolidatedSrcRowType"] = conRowType;
+	evtArg["destRowIndex"] = destRowIndex;
+	evtArg["destRowId"] = destRowId;
+	evtArg["destRowType"] = destRowType;
+	this._dispatch("beforeDataMoved", evtArg);
+	if(evtArg["cancel"]) {
+		return 0;
+	}
+
+	let movedRowIds = null;
+	if(srcGrid === destGrid) { // TODO: Support wrap mode
+		if(conRowType === "MIXED") {
+			movedRowIds = srcDv.moveRow(srcRowIds, destRowId); // TODO: Handle each row individually in this mixed case
+		} else if(conRowType === "CONTENT") {
+			if(destRowType === "GROUP_HEADER") {
+				if(srcDv.getSegmentChildIds(destRowId)) {
+					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				} else { // Add content row as a new member only if there is no member
+					srcDv.addSegmentChildren(destRowId, srcRowIds);
+					movedRowIds = srcRowIds;
+				}
+			} else if(_isNormalRowType(destRowType)) {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			} else if(destRowType === "GROUP_MEMBER") {
+				srcDv.addSegmentChildren(destParentRowId, srcRowIds);
+
+				srcDv.moveRow(srcRowIds, destRowId);
+				movedRowIds = srcRowIds;
+			}
+		} else if(conRowType === "CHAIN" || conRowType === "GROUP_HEADER") {
+			if(_isNormalRowType(destRowType)) {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			}
+		} else if(conRowType === "GROUP_MEMBER") {
+			if(destRowType !== "CONSTITUENT" && destRowType !== "SUBGROUP_HEADER") {
+				let srcRowId = srcRowIds[0];
+				let parentRowId = srcDv.getSegmentParentRowId(srcRowId);
+				let endOfSegment = -1;
+				if(!srcDv.isSegmentCollapsed(parentRowId)) {
+					let childRowIds = srcDv.getSegmentChildIds(parentRowId);
+					let childCount = childRowIds ? childRowIds.length : 0;
+					endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
+				}
+				if(destRowIndex !== endOfSegment) {
+					if(destRowType !== "GROUP_MEMBER" || parentRowId !== destParentRowId) {
+						srcDv.removeSegmentChildren(parentRowId, srcRowIds); // move members out of existing segment
+						if(destParentRowId) {
+							srcDv.addSegmentChildren(destParentRowId, srcRowIds); // Moving row between two segments
+						}
+					}
+				}
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			} // CONSTITUENT and SUBGROUP_HEADER types are not valid destination
+		} // CONSTITUENT and SUBGROUP_HEADER types cannot be moved
+	} else {
+		// TODO: Add support moving row based on row types
+		// TODO: Check if we support moving to last row for multi-table
+
+		evtArg["destGrid"] = destGrid;
+
+		if(api) { // This can only be Real-time Grid
+			let destApi = this.getGridApi(destGrid);
+			if(destApi) {
+				movedRowIds = srcRowIds;
+				for(i = 0; i < srcCount; ++i) {
+					let rowDef = api.getRowDefinition(srcRowIds[i]);
+					if(rowDef) {
+						destApi.insertRow(rowDef.getConfigObject(), destRowId);
+					}
+				}
+				api.removeRows(srcRowIds);
+			}
+		} else {
+			movedRowIds = srcRowIds;
+			for(i = 0; i < srcCount; ++i) {
+				let rowData = srcDv.getRowData(srcRowIds[i]);
+				if(rowData) {
+					destDv.insertRow(destRowId, rowData); // TODO: Update view data source and grid
+				}
+			}
+			srcDv.removeRows(srcRowIndices);
+		}
+	}
+
+	let moveCount = 0;
+	if(movedRowIds) {
+		if(Array.isArray(movedRowIds)) {
+			moveCount = movedRowIds.length;
+		} else { // Single row is moved
+			movedRowIds = [movedRowIds];
+			moveCount = 1;
+		}
+	}
+
+	if(moveCount) {
+		destGrid.focus();
+
+		evtArg["rowIndex"] = destDv.getRowIndex(srcRowIds[0]);
+		// For backward compatibility and should not be used anymore
+		evtArg["originRowId"] = movedRowIds[0];
+		evtArg["originRowIds"] = movedRowIds;
+		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
+
+		this._dispatch("dataMoved", evtArg);
+	}
+	return moveCount;
+};
+/** @private
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype._isDragCancelled = function () {
+	return (this._pos && this._pos["cancel"]) ? true : false;
+};
+
+/** @private
+* @param {Event=} e
+*/
+RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
+	let pos = this._pos;
+	if (this._uiDisabled || !pos || pos["invalidTarget"]) {
+		return;
+	}
+	if(pos["dragBoxIcon"] === "not-allowed" || pos["dragBoxIcon"] === "void" ) {
+		Dom.removeParent(this._guideline);
+		return;
+	}
+
+	if (_isInContentSection(pos)) {
+		let guideline = this._guideline;
+		// let grid = pos["grid"];
+		let section = pos["section"];
+		let pn = section.getColumnHost(); // This is to hide out of view guideline
+		if (pn !== guideline.parentNode) {
+			guideline.style.width = section.getWidth() + "px";
+			pn.appendChild(guideline);
+		}
+
+		let cellElement = pos["cellElement"];
+		let relativePos = Dom.getRelativePosition(cellElement, pn);
+		let cellTop = relativePos["y"];
+		let rowIndex = pos["rowIndex"];
+		let offsetY = 0;
+
+		if(rowIndex) {
+			offsetY = -1; // Make guideline stay on top of the target cell
+			if(e) { // MouseEvent or TouchEvent
+				let lastRow = section.getRowCount() - 1;
+				if(rowIndex >= lastRow) { // bottommost row
+					let rowHeight = section.getRowHeight(lastRow);
+					relativePos = Dom.getRelativePosition(e, cellElement);
+					if(relativePos["y"] >= (rowHeight / 2) | 0) {
+						offsetY = rowHeight - 3; // TODO: Use actual guideline height for the offset
+						++pos["rowIndex"];
+					}
+				}
+			}
+		} // else { Topmost row
+
+		guideline.style.top = (cellTop + offsetY) + "px";
+	}
+};
+
+
+/** @private
+* @param {Object} posObj
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype._shouldPreventDrop = function (posObj) {
+	if(this._startingRowType === "CONSTITUENT" || this._startingRowType === "SUBGROUP_HEADER") {
+		return true;
+	}
+
+	if(!posObj) {
+		return false;
+	}
+	let grid = posObj["grid"];
+	if(!grid) {
+		return false;
+	}
+	let dv = grid.getDataSource();
+	if(!dv) {
+		return false; // Grid has been disposed
+	}
+
+	let destApi = this.getGridApi(grid);
+	let destRowId = dv.getRowId(posObj["rowIndex"]);
+	let destParentId = dv.getSegmentParentRowId(destRowId);
+	if(this._startingRowType === "GROUP_MEMBER") {
+		let startingParentId = dv.getSegmentParentRowId(this._startingRid);
+		let startingApi = this.getGridApi(this._startingGrid);
+		if(_getRowType(startingApi, startingParentId) === "SUBGROUP_HEADER") {
+			if(!destParentId) {
+				return true;
+			}
+
+			if(destParentId === startingParentId) { // GROUP_MEMBER same parent can be move inside
+				return false;
+			}
+			return true;
+		}
+		// else { } starting have GROUP_HEADER case, it can be move outside the group
+	} else if(this._startingRowType === "CHAIN" ) {
+		if(destParentId) { // CHAIN can not move inside the member that have parent
+			return true;
+		}
+	} else if (this._startingRowType === "GROUP_HEADER") {
+		if(destParentId) { // GROUP_HEADER can't move inside another GROUP, SUBGROUP, or the same group
+			return true;
+		}
+	}
+
+	let destRowType = _getRowType(destApi, destRowId);
+	if(destRowType === "CONSTITUENT" || destRowType === "SUBGROUP_HEADER") { // Do not allow dropping this type when starting with any row types
+		return true;
+	}
+
+	if(destRowType === "GROUP_MEMBER") {
+		if(_getRowType(destApi, destParentId) === "SUBGROUP_HEADER") { // Do not allow to drop group member that have parent is SUBGROUP_HEADER
+			return true;
+		}
+	}
+
+	return false;
+
+};
+
+/** @private */
+RowDraggingPlugin.prototype._clearCache = function () {
+	if (this._dragPulseId) {
+		clearInterval(this._dragPulseId);
+		this._dragPulseId = 0;
+	}
+
+	this._pos = this._dragTarget = this._startingGrid = null;
+
+	this._scrollingZone = false;
+};
+
+
+/** @private */
+RowDraggingPlugin.prototype._onDragPulse = function () {
+	if (!this._dragging) { return; }
+
+	this._dispatch("dragInterval", this._pos);
+
+	// Manage vertical scrollbar
+	let primaryHost = this._pos["grid"] || this._startingGrid;
+	if (!primaryHost || !primaryHost.getVScrollbar().isActive()) {
+		return;
+	}
+
+	let y = this._pos["y"];
+	if (y == null) { return; }
+
+	if (y >= this._topBound && y <= this._btmBound) {
+		this._scrollingZone = false;
+	} else {
+		this._scrollingZone = true;
+		let scrollVal = (this._scrollStep * (0.8 + Math.random())) | 0;
+
+		if (y < this._topBound) {
+			scrollVal = -scrollVal;
+		}
+		primaryHost.scrollDown(scrollVal);
+	}
+};
+
+/** @private
+ * @param {string} str
+ */
+RowDraggingPlugin.prototype._setEntryPoint = function (str) {
+	this._entryPoint = str;
+	this.setDragContent(null); // Clear original content
+};
+
+/** @private
+ * @param {Object} e
+ */
+RowDraggingPlugin.prototype._onMouseOut = function (e) {
+	if(!e) {
+		e = window.event;
+		if(!e) {
+			return;
+		}
+	}
+	let from = e.relatedTarget || e.toElement;
+	if (!from || from.nodeName == "HTML") {
+		/*
+		 * TRGRID-1493
+		 * The DragStart is delayed using a timer (_timerId created by _delayStart )
+		 * The mouse may left the window before the drag start
+		 * In this case we should force the stopDrag to stop the drag on the source
+		 * Because the mouse up will not be handled by the source
+		 */
+
+		// cancel the timer - _onDragStart will not be called by the timer
+		if(this._timerId) {
+			clearTimeout(this._timerId);
+			this._timerId = 0;
+		}
+
+		this._onDragStart();
+		this.stopDrag();
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._delayStart = function (e) {
+	this._startingGrid.unlisten("mousemove", this._delayStart);
+
+	if(!this._timerId) {
+		this._timerId = window.setTimeout(this._onDragStart, 200);
+	}
+	if (this._jetDnD) {
+		document.addEventListener("mouseout", this._onMouseOut, false);
+	}
+};
+/** @private
+* @param {boolean=} bool
+*/
+RowDraggingPlugin.prototype._listenAbortActions = function (bool) {
+	if (bool !== false) {
+		window.addEventListener("mouseup", this._clearCache, false);
+	} else {
+		window.removeEventListener("mouseup", this._clearCache, false);
+	}
+};
+/** @private
+* @param {boolean=} delayStart
+* @param {*=} startRef
+* @param {boolean=} fromJET
+*/
+RowDraggingPlugin.prototype._startDrag = function (delayStart, startRef, fromJET) {
+	if (this._dragging || this._hosts.length <= 0) { return; }
+	if (this._disabled) { return; }
+
+	let pos;
+	if (startRef) {
+		if (startRef.type === "dragstart") {
+			if (startRef["preventDefault"]) {
+				Dom.preventDefault(startRef);
+			}
+			let host = this.getRelativeGrid(startRef);
+			if (host) {
+				pos = host.getRelativePosition(this._dragTarget);
+			}
+		} else {
+			pos = this._hitTest(startRef);
+		}
+	} else {
+		let target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
+		pos = this._hitTest(target);
+	}
+
+	if (_isInContentSection(pos)) {
+		this._clearCache();
+		this._pos = pos;
+		this._startingGrid = pos["grid"];
+
+		if (delayStart) {
+			this._startingGrid.listen("mousemove", this._delayStart);
+			this._listenAbortActions();
+		} else { // Start immediately
+			this._onDragStart(startRef, fromJET);
+		}
+	}
+};
+/** @private
+* @param {Object} clientPos
+*/
+RowDraggingPlugin.prototype._onJETDragOver = function (clientPos) {
+	if (!clientPos) { return; }
+
+	if (!this._dragging) {
+		if (!clientPos["dropData"]) { return; }
+		this._setEntryPoint("JET");
+		this.setJETDragContent(clientPos["dropData"]); // WARNING: We have no way to distinguish between dropData from grid and other apps
+		this._startDrag(false, clientPos["e"], true); // Event is suppressed
+	} else {
+		this._onDrag(clientPos["e"]);
+	}
+};
+/** @private
+* @param {Object} jetObj
+*/
+RowDraggingPlugin.prototype._onJETDrop = function (jetObj) {
+	if (!this._dragging) { return; }
+
+	if (!this._jetDragContent) {
+		this._jetDragContent = jetObj; // To maintain original client signature
+	}
+	this._onDragEnd(jetObj["mouse"]["srcEvent"]);
+};
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+RowDraggingPlugin.prototype._getEventHandlers = function() {
+	return {
+		"mouseout": this._onMouseOut
+	};
+};
+
+
+
+export default RowDraggingPlugin;
+export { RowDraggingPlugin, RowDraggingPlugin as RowDragging, RowDraggingPlugin as RowDraggingExtension };