Replace draggable used in fw splitter

api/js/framework/fw_ui.js

@@ -18,6 +18,7 @@ import "../jquery/jquery.noconflict.js";
 import "../jquery/mousewheel/mousewheel.js";
 import '../jsapi/egw_inheritance.js';
 import {EGW_KEY_ENTER, EGW_KEY_SPACE} from '../egw_action/egw_action_constants.js';
+import interact from "@interactjs/interactjs";
 
 /**
  * ui siemenu entry class
@@ -1255,36 +1256,37 @@ window.egw_fw_ui_splitter = function(_contDiv, _orientation, _resizeCallback, _c
 
 	//Setup the options for the dragable object
 	var dragoptions = {
-		opacity: 0.7,
+		listeners : {
-		helper: 'clone',
+			start(event)
-		start: function(event, ui) {
+			{
-			return this._parent.dragStartHandler.call(this._parent, event, ui);
+				return event.currentTarget._parent.dragStartHandler.call(event.currentTarget._parent, event);
 			},
-		drag: function(event, ui) {
+			move (event)
-			return this._parent.dragHandler.call(this._parent, event, ui);
+			{
+				return event.currentTarget._parent.dragHandler.call(event.currentTarget._parent, event);
 			},
-		stop: function(event, ui) {
+			end (event)
-			return this._parent.dragStopHandler.call(this._parent, event, ui);
+			{
-		},
+				return event.currentTarget._parent.dragStopHandler.call(event.currentTarget._parent, event);
-		containment: 'document',
+			}
-		appendTo: 'body',
+		}
-		axis: 'y',
-		iframeFix: true,
-		zIndex: 10000
 	};
 
 	switch (this.orientation)
 	{
 		case EGW_SPLITTER_HORIZONTAL:
-			dragoptions.axis = 'y';
+			dragoptions.startAxis = 'y';
 			jQuery(this.splitterDiv).addClass("egw_fw_ui_splitter_horizontal");
 			break;
 		case EGW_SPLITTER_VERTICAL:
-			dragoptions.axis = 'x';
+			dragoptions.startAxis = 'x';
 			jQuery(this.splitterDiv).addClass("egw_fw_ui_splitter_vertical");
 			break;
 	}
-//	jQuery(this.splitterDiv).draggable(dragoptions);
+	interact(this.splitterDiv)
+		.styleCursor(false)
+		.draggable(dragoptions);
+
 
 	//Handle mouse hovering of the splitter div
 	jQuery(this.splitterDiv).mouseenter(function() {
@@ -1323,67 +1325,52 @@ window.egw_fw_ui_splitter.prototype.clipDelta = function(_delta)
 	return result;
 };
 
-window.egw_fw_ui_splitter.prototype.dragStartHandler = function(event, ui)
+window.egw_fw_ui_splitter.prototype.dragStartHandler = function(event)
 {
 	switch (this.orientation)
 	{
 		case EGW_SPLITTER_HORIZONTAL:
-			this.startPos = ui.offset.top;
+			this.startPos = event.clientY0;
 			break;
 		case EGW_SPLITTER_VERTICAL:
-			this.startPos = ui.offset.left;
+			this.startPos = event.clientX0;
 			break;
 	}
 };
 
-window.egw_fw_ui_splitter.prototype.dragHandler = function(event, ui)
+window.egw_fw_ui_splitter.prototype.dragHandler = function(event)
-{
-/*	var delta = 0;
-	switch (this.orientation)
-	{
-		case EGW_SPLITTER_HORIZONTAL:
-			var old = ui.offset.top - this.startPos;
-			clipped = this.clipDelta(old);
-			jQuery(this.splitterDiv).data('draggable').offset.click.top += (old - clipped);
-			break;
-		case EGW_SPLITTER_VERTICAL:
-			var old = ui.offset.left - this.startPos;
-			clipped = this.clipDelta(old);
-			jQuery(this.splitterDiv).data('draggable').offset.click.left += (old - clipped);
-			break;
-	}*/
-};
-
-
-window.egw_fw_ui_splitter.prototype.dragStopHandler = function(event, ui)
 {
 	var delta = 0;
 	switch (this.orientation)
 	{
 		case EGW_SPLITTER_HORIZONTAL:
-			delta = ui.offset.top - this.startPos;
+			delta = event.delta.y;
 			break;
 		case EGW_SPLITTER_VERTICAL:
-			delta = ui.offset.left - this.startPos;
+			delta = event.delta.x;
 			break;
 	}
 
 	//Clip the delta value
-	delta = this.clipDelta(delta);
-
 	this.constraints[0].size += delta;
 	this.constraints[1].size -= delta;
 
 	this.resizeCallback(this.constraints[0].size, this.constraints[1].size);
 };
 
+
+window.egw_fw_ui_splitter.prototype.dragStopHandler = function(event)
+{
+	return; // let draghandler taking care of resize callback
+};
+
 /**
  * Disable/Enable drabbale splitter
  * @param {type} _state
  */
 window.egw_fw_ui_splitter.prototype.set_disable = function (_state)
 {
-//	jQuery(this.splitterDiv).draggable(_state?'disable':'enable');
+	interact(this.splitterDiv).options.drag.enabled = !_state;
 };
 
 /**