From 23bf38b30350e29e05fc3d4f65b378ca4a89cc14 Mon Sep 17 00:00:00 2001
From: Valentin Voilean <valentin.voilean@netcentric.biz>
Date: Wed, 9 Nov 2016 01:00:56 +0100
Subject: [PATCH 1/3] add class on dragover

---
 Sortable.js | 50 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/Sortable.js b/Sortable.js
index 2a565763a..f56967b76 100644
--- a/Sortable.js
+++ b/Sortable.js
@@ -246,6 +246,8 @@
 			ghostClass: 'sortable-ghost',
 			chosenClass: 'sortable-chosen',
 			dragClass: 'sortable-drag',
+			validGroupClass: 'sortable-valid',
+			invalidGroupClass: 'sortable-invalid',
 			ignore: 'a, img',
 			filter: null,
 			animation: 0,
@@ -288,9 +290,10 @@
 		if (this.nativeDraggable) {
 			_on(el, 'dragover', this);
 			_on(el, 'dragenter', this);
+			_on(el, 'dragleave', this);
 		}
 
-		touchDragOverListeners.push(this._onDragOver);
+		touchDragOverListeners.push(this._onDragOver, this._onDragLeave);
 
 		// Restore sorting
 		options.store && this.sort(options.store.get(this));
@@ -666,6 +669,9 @@
 				) &&
 				(evt.rootEl === void 0 || evt.rootEl === this.el) // touch fallback
 			) {
+				_toggleClass(el, options.invalidGroupClass, false);
+				_toggleClass(el, options.validGroupClass, true);
+
 				// Smart auto-scrolling
 				_autoScroll(evt, options, this.el);
 
@@ -776,6 +782,20 @@
 					}
 				}
 			}
+			else {
+				_toggleClass(el, options.validGroupClass, false);
+				_toggleClass(el, options.invalidGroupClass, true);
+			}
+		},
+
+		_onDragLeave: function () {
+			var el = this.el,
+				options = this.options;
+
+			_toggleClass(el, options.invalidGroupClass, false);
+			_toggleClass(el, options.validGroupClass, false);
+
+			el = null;
 		},
 
 		_animate: function (prevRect, target) {
@@ -817,6 +837,8 @@
 			var el = this.el,
 				options = this.options;
 
+			this._onDragLeave();
+
 			clearInterval(this._loopId);
 			clearInterval(autoScroll.pid);
 			clearTimeout(this._dragStartTimer);
@@ -929,14 +951,23 @@
 		handleEvent: function (/**Event*/evt) {
 			var type = evt.type;
 
-			if (type === 'dragover' || type === 'dragenter') {
-				if (dragEl) {
-					this._onDragOver(evt);
-					_globalDragOver(evt);
-				}
-			}
-			else if (type === 'drop' || type === 'dragend') {
-				this._onDrop(evt);
+			switch (type) {
+				case 'dragover':
+				case 'dragenter':
+					if (dragEl) {
+						this._onDragOver(evt);
+						_globalDragOver(evt);
+					}
+					break;
+
+				case 'dragleave':
+					this._onDragLeave(evt);
+					break;
+
+				case 'drop':
+				case 'dragend':
+					this._onDrop(evt);
+					break;
 			}
 		},
 
@@ -1051,6 +1082,7 @@
 			});
 
 			touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);
+			touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragLeave), 1);
 
 			this._onDrop();
 

From 38ef1bdd1a085d15973e13db7110af30ed53300a Mon Sep 17 00:00:00 2001
From: Valentin Voilean <valentin.voilean@netcentric.biz>
Date: Wed, 9 Nov 2016 01:14:10 +0100
Subject: [PATCH 2/3] "evt.to" doesn't change when the onEnd is called

---
 Sortable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sortable.js b/Sortable.js
index f56967b76..cc10702ee 100644
--- a/Sortable.js
+++ b/Sortable.js
@@ -911,7 +911,7 @@
 							newIndex = oldIndex;
 						}
 
-						_dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);
+						_dispatchEvent(this, parentEl, 'end', dragEl, rootEl, oldIndex, newIndex);
 
 						// Save sorting
 						this.save();

From de26592dfae01e058030fe711d9a1b4459aadfec Mon Sep 17 00:00:00 2001
From: Valentin Voilean <valentin.voilean@netcentric.biz>
Date: Mon, 21 Nov 2016 12:29:25 +0100
Subject: [PATCH 3/3] Improved performance: - took out the dragOver event; -
 added the "pointer-events" css property ( IE >= 11 ) - improved the dragLeave
 event to not be called on children (IE < 11)

---
 Sortable.js | 9 +++++++--
 st/app.css  | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/Sortable.js b/Sortable.js
index cc10702ee..12708b158 100644
--- a/Sortable.js
+++ b/Sortable.js
@@ -952,7 +952,6 @@
 			var type = evt.type;
 
 			switch (type) {
-				case 'dragover':
 				case 'dragenter':
 					if (dragEl) {
 						this._onDragOver(evt);
@@ -961,7 +960,13 @@
 					break;
 
 				case 'dragleave':
-					this._onDragLeave(evt);
+					if (evt.target.tagName.toLowerCase() === this.options.draggable) {
+						evt.preventDefault();
+						evt.stopPropagation();
+					}
+					else {
+						this._onDragLeave(evt);
+					}
 					break;
 
 				case 'drop':
diff --git a/st/app.css b/st/app.css
index 1de653029..81dc4218a 100644
--- a/st/app.css
+++ b/st/app.css
@@ -51,6 +51,10 @@ ul {
 	opacity: .2;
 }
 
+.sortable-invalid > * {
+	pointer-events: none;
+}
+
 #foo .sortable-drag {
 	background: #daf4ff;
 }