Remove jQueryUI for moving events in timegrid view

api/js/egw_action/egw_action_dragdrop.js

@@ -215,7 +215,7 @@ export function egwDragActionImplementation()
 
 			node.setAttribute('draggable', true);
 			const dragstart = function(event) {
-				event.stopImmediatePropagation();
+				//event.stopImmediatePropagation();
 				if (action) {
 					if (_context.isSelection(event)) return;
 

calendar/js/et2_widget_event.ts

@@ -113,8 +113,12 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 										jQuery('body .egw_tooltip')
 											.css('border', 'none')
 											.on('mouseenter', function()
+											{
+												if(event.div)
 												{
 													event.div.off('mouseleave.tooltip');
+												}
+
 												jQuery('body.egw_tooltip').remove();
 												jQuery('body').append(this);
 												jQuery(this).stop(true).fadeTo(400, 1)

calendar/js/et2_widget_timegrid.ts

@@ -356,22 +356,26 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 
 		// Customize and override some draggable settings
 		this.div
-			.on('dragcreate','.calendar_calEvent', function(event, ui) {
+			.on('dragcreate', '.calendar_calEvent', function(event, ui)
+			{
 				jQuery(this).draggable('option', 'cancel', '.rowNoEdit');
 				// Act like you clicked the header, makes it easier to position
 				// but put it to the side (-5) so we can still do the hover
 				jQuery(this).draggable('option', 'cursorAt', {top: 5, left: -5});
 			})
-			.on('dragstart', '.calendar_calEvent', function(event,ui) {
+			.on('dragstart', '.calendar_calEvent', function(event, ui)
-				jQuery('.calendar_calEvent', ui.helper).width(jQuery(this).width())
+			{
-					.height(jQuery(this).outerHeight())
-					.css('top', '').css('left', '')
-					.appendTo(ui.helper);
-				ui.helper.width(jQuery(this).width());
-
 				// Cancel drag to create, we're dragging an existing event
 				timegrid.drag_create.start = null;
 				timegrid._drag_create_end();
+				timegrid.div.on("drag.timegrid", (e) =>
+				{
+					timegrid._get_time_from_position(e.clientX, e.clientY);
+				})
+			})
+			.on("dragend", () =>
+			{
+				timegrid.div.off("drag.timegrid");
 			})
 			.on('mousemove', function(event)
 			{
@@ -508,18 +512,12 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				}
 
 				// Leave the helper there until the update is done
-				var loading = ui.helper.clone(true).appendTo(jQuery('body'));
+				var loading = event_data.event_node;
 				// and add a loading icon so user knows something is happening
-				if(jQuery('.calendar_timeDemo',loading).length == 0)
+				jQuery('.calendar_calEventHeader', event_widget.div).addClass('loading');
-				{
-					jQuery('.calendar_calEventHeader',loading).addClass('loading');
-				}
-				else
-				{
-					jQuery('.calendar_timeDemo',loading).after('<div class="loading"></div>');
-				}
 
-				event_widget.recur_prompt(function(button_id) {
+				event_widget.recur_prompt(function(button_id)
+				{
 					if(button_id === 'cancel' || !button_id)
 					{
 						// Need to refresh the event with original info to clean up
@@ -539,7 +537,11 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 						// If it is an integrated infolog event we need to edit infolog entry
 						egw().json('stylite_infolog_calendar_integration::ajax_moveInfologEvent',
 							[event_data.app_id, target_date || false, duration],
-							function() {loading.remove();}
+							function()
+							{
+								debugger;
+								loading.remove();
+							}
 						).sendRequest(true);
 					}
 					else
@@ -566,7 +568,10 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 									duration,
 									series_instance
 								],
-								function() { loading.remove();}
+								function()
+								{
+									loading.remove();
+								}
 							).sendRequest(true);
 						};
 
@@ -1269,11 +1274,18 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 			widget_object.getActionLink('egw_link_drop').enabled = !enabled;
 		};
 
-		aoi.doTriggerEvent = function(_event, _data) {
+		aoi.doTriggerEvent = function(_event, _data)
+		{
 			// Determine target node
 			var event = _data.event || false;
-			if(!event) return;
+			if(!event)
-			if(_data.ui.draggable.hasClass('rowNoEdit')) return;
+			{
+				return;
+			}
+			if(_data.ui.draggable.classList.contains('rowNoEdit'))
+			{
+				return;
+			}
 
 			/*
 			We have to handle the drop in the normal event stream instead of waiting
@@ -1284,14 +1296,16 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				var dropEnd = false;
 				var helper = jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0];
 				if(helper && helper.dropEnd && helper.dropEnd.length >= 1)
+				{
 					if(typeof this.dropEnd !== 'undefined' && this.dropEnd.length >= 1)
 					{
 						dropEnd = helper.dropEnd[0].dataset || false;
 					}
+				}
 				this.getWidget()._event_drop.call(jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0], this.getWidget(), event, _data.ui, dropEnd);
 			}
 			var drag_listener = function(_event, ui) {
-				aoi.getWidget()._drag_helper(jQuery('.calendar_d-n-d_timeCounter',ui.helper)[0],ui.helper[0],0);
+				aoi.getWidget()._drag_helper(jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0], _data.ui.helper[0], 0);
 				if(aoi.getWidget().daily_owner)
 				{
 					_invite_enabled(
@@ -1308,9 +1322,10 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				case EGW_AI_DRAG_OVER:
 					// Listen to the drag and update the helper with the time
 					// This part lets us drag between different timegrids
-					_data.ui.draggable.on('drag.et2_timegrid'+widget_object.id, drag_listener);
+					jQuery(_data.ui.draggable).on('drag.et2_timegrid' + widget_object.id, drag_listener);
-					_data.ui.draggable.on('dragend.et2_timegrid'+widget_object.id, function() {
+					jQuery(_data.ui.draggable).on('dragend.et2_timegrid' + widget_object.id, function()
-						_data.ui.draggable.off('drag.et2_timegrid' + widget_object.id);
+					{
+						jQuery(_data.ui.draggable).off('drag.et2_timegrid' + widget_object.id);
 					});
 
 					// Remove formatting for out-of-view events (full day non-blocking)
@@ -1318,7 +1333,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 					jQuery('.calendar_calEventBody', _data.ui.helper).css('padding-top', '');
 
 					// Disable invite / change actions for same calendar or already participant
-					var event = _data.ui.draggable.data('selected')[0];
+					var event = _data.ui.selected[0];
 					if(!event || event.id && event.id.indexOf('calendar') !== 0)
 					{
 						event = false;
@@ -1339,7 +1354,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 					}
 					else
 					{
-						_data.ui.helper.prepend('<div class="calendar_d-n-d_timeCounter" data-count="1"><span></span></div>');
+						jQuery(_data.ui.helper).prepend('<div class="calendar_d-n-d_timeCounter" data-count="1"><span></span></div>');
 					}
 
 					break;
@@ -1347,7 +1362,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				// Triggered once, when something is dragged out of the timegrid
 				case EGW_AI_DRAG_OUT:
 					// Stop listening
-					_data.ui.draggable.off('drag.et2_timegrid'+widget_object.id);
+					jQuery(_data.ui.draggable).off('drag.et2_timegrid' + widget_object.id);
 					// Remove highlighted time square
 					var timegrid = aoi.getWidget();
 					timegrid.gridHover.hide();