From 4820f5adecbeaebcf6d6329aabd46a6a971ed27a Mon Sep 17 00:00:00 2001
From: Diego Nascimento <diego.nascimento@liferay.com>
Date: Thu, 24 Jan 2019 14:00:41 -0300
Subject: [PATCH] Fixes #103 | Adds a source element to take up the same amout
 of space as the original to prevent browser suddenly scroll

---
 packages/metal-drag-drop/src/Drag.js | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/packages/metal-drag-drop/src/Drag.js b/packages/metal-drag-drop/src/Drag.js
index d636c263b..6b286a26b 100644
--- a/packages/metal-drag-drop/src/Drag.js
+++ b/packages/metal-drag-drop/src/Drag.js
@@ -39,6 +39,14 @@ class Drag extends State {
 		 */
 		this.activeDragSource_ = null;
 
+		/**
+		 * The element that will handle a placeholder for the source
+		 * element when the reference of the placeholder is the same as the source.
+		 * @type {Element}
+		 * @protected
+		 */
+		this.activeSourcePlaceholder_ = null;
+
 		/**
 		 * The distance that has been dragged.
 		 * @type {number}
@@ -257,6 +265,9 @@ class Drag extends State {
 			if (this.isPlaceholderClone_()) {
 				dom.exitDocument(this.activeDragPlaceholder_);
 			}
+			if (this.isSourcePlaceholder_()) {
+				dom.exitDocument(this.activeSourcePlaceholder_);
+			}
 		}
 		this.activeDragPlaceholder_ = null;
 		this.activeDragSource_ = null;
@@ -369,9 +380,38 @@ class Drag extends State {
 			this.activeDragPlaceholder_ = dragPlaceholder;
 		} else {
 			this.activeDragPlaceholder_ = this.activeDragSource_;
+			this.activeSourcePlaceholder_ = this.createSourcePlaceholder_();
 		}
 	}
 
+	/**
+	 * Creates an element that will be used as placeholder for source element to take up
+	 * the same amount of space as the original source, preventing browser's scroll suddenly when resizing.
+	 * @return {!Element}
+	 * @protected
+	 */
+	createSourcePlaceholder_() {
+		let placeholder = document.createElement('a');
+
+		let styles = window.getComputedStyle(this.activeDragSource_);
+
+		object.mixin(placeholder.style, {
+			display: styles.display,
+			boxSizing: styles.boxSizing || styles.webkitBoxSizing,
+			width: styles.width,
+			height: styles.height,
+			margin: styles.margin,
+			flexShrink: styles.flexShrink || styles.webkitFlexShrink,
+			flexGrow: styles.flexGrow || styles.webkitFlexGrow,
+			// Avoid the browser needing to worry about pointer events of this element.
+			pointerEvents: styles.pointerEvents,
+		});
+
+		dom.append(this.activeDragSource_.parentNode, placeholder);
+
+		return placeholder;
+	}
+
 	/**
 	 * The default behavior for the `Drag.Events.DRAG` event. Can be prevented
 	 * by calling the `preventDefault` function on the event's facade. Moves
@@ -623,6 +663,14 @@ class Drag extends State {
 		return this.dragging_;
 	}
 
+	/**
+	 * Checks if the source is not the original source.
+	 * @return {boolean}
+	 */
+	isSourcePlaceholder_() {
+		return !!this.activeSourcePlaceholder_;
+	}
+
 	/**
 	 * Returns true if current drag placeholder is a clone of the original drag
 	 * source.