From 19135ab90404d112ae5df6776335d58f1131fd78 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 4 Aug 2021 14:48:02 +0200
Subject: [PATCH] Replace nm column jquery-ui sorting with sortablejs

---
 api/js/etemplate/et2_extension_nextmatch.ts | 37 ++++++++-------------
 api/js/etemplate/et2_widget_grid.ts         |  2 +-
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/api/js/etemplate/et2_extension_nextmatch.ts b/api/js/etemplate/et2_extension_nextmatch.ts
index f62c874693..a69622ff3d 100644
--- a/api/js/etemplate/et2_extension_nextmatch.ts
+++ b/api/js/etemplate/et2_extension_nextmatch.ts
@@ -2078,30 +2078,19 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 				self.selectPopup = null;
 			};
 			const $select = jQuery(select.getDOMNode());
-			$select.find('.ui-multiselect-checkboxes').sortable({
-				placeholder:'ui-fav-sortable-placeholder',
-				items:'li[class^="selcolumn_sortable_col"]',
-				cancel: 'li[class^="selcolumn_sortable_#"]',
-				cursor: "move",
-				tolerance: "pointer",
-				axis: 'y',
-				containment: "parent",
-				delay: 250, //(millisecond) delay before the sorting should start
-				beforeStop: function(event, ui) {
-					jQuery('li[class^="selcolumn_sortable_#"]', this).css({
-						opacity: 1
-					});
-				},
-				start: function(event, ui){
-					jQuery('li[class^="selcolumn_sortable_#"]', this).css({
-						opacity: 0.5
-					});
-				},
-				sort: function (event, ui)
-				{
-					jQuery( this ).sortable("refreshPositions" );
-				}
-			});
+
+			//todo (todo-jquery-ui): fix the sortable import statement
+			import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
+				let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], {
+					ghostClass: 'ui-fav-sortable-placeholder',
+					draggable: 'li[class^="selcolumn_sortable_col"]',
+					filter: 'li[class^="selcolumn_sortable_#"]',
+					direction: 'vertical',
+					delay: 25,
+
+				});
+			}.bind(this));
+
 			$select.disableSelection();
 			$select.find('li[class^="selcolumn_sortable_"]').each(function(i,v){
 				// @ts-ignore
diff --git a/api/js/etemplate/et2_widget_grid.ts b/api/js/etemplate/et2_widget_grid.ts
index 19b2e9d1d1..0ef49a4b9d 100644
--- a/api/js/etemplate/et2_widget_grid.ts
+++ b/api/js/etemplate/et2_widget_grid.ts
@@ -962,7 +962,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}
 
 
-		//todo: fix the sortable import statement
+		//todo (todo-jquery-ui): fix the sortable import statement
 		import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
 			this.sortablejs = new Sortable(tbody,{
 				group: this.options.sortable_connectWith,