refactor(WidgetIcon for Dashboard dragging): puts the hidden dashboard icons for the dragging image in the section component so that each section has its relative clientX and clientY positions

public/css/components/dashboard.css

@@ -84,4 +84,5 @@
 	top: -999px;
 	left: -999px;
 	z-index: 3;
-}
+}
+

public/js/components/Dashboard/Item.js

@@ -100,7 +100,7 @@ export default {
 	},
 	watch: {
 		config() {
-			this.arguments = { ...this.widget.arguments, ...this.config };
+			this.arguments = { ...this.widget?.arguments, ...this.config };
 			this.tmpConfig = { ...this.arguments };
 			this.$refs.config && this.$refs.config.hide();
 			this.isLoading = false;

public/js/components/Dashboard/Section.js

@@ -2,13 +2,20 @@ import BsConfirm from "../Bootstrap/Confirm.js";
 import DropGrid from '../Drop/Grid.js'
 import DashboardItem from "./Item.js";
 import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
+import WidgetIcon from "./Widget/WidgetIcon.js"
+
 export default {
 	name: 'Section',
 	components: {
 		DropGrid,
-		DashboardItem
+		DashboardItem,
+		WidgetIcon,
 	},
 	inject: {
+		widgetsSetup:{
+			type: Object,
+			default: {},
+		},
 		adminMode: {
 			type: Boolean,
 			default: false
@@ -38,7 +45,8 @@ export default {
 		return {
 			editModeIsActive: Vue.computed(() =>
 				this.editModeIsActive
-			),		
+			),	
+			sectionName: Vue.computed(() => this.name),	
 		}
 	},
 	computed: {
@@ -205,7 +213,12 @@ export default {
 		});
 	},
 	template: `
-	<div class="dashboard-section" ref="container" :style="getSectionStyle">
+	<div class="dashboard-section position-relative" ref="container" :style="getSectionStyle">
+		<template v-for="setup in widgetsSetup">
+			<div class="dragged-widget-icon" :id="'widget-'+name+'-'+setup.widget_id" >
+				<widget-icon v-if="widgetsSetup" :widget="setup"></widget-icon>
+			</div>
+		</template>
 		<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
 				

public/js/components/Dashboard/Widget/WidgetIcon.js

@@ -19,7 +19,7 @@ export default {
 	},
 	emits:["select"],
 	template: /*html */`
-	<div class="card h-100" @click="$emit('select',widget.widget_id);  pick(widget.widget_id)">
+	<div class="card h-100" @click="$emit('select',widget.widget_id);">
 		<img class="card-img-top" :src="path(widget.setup.icon)" :alt="'pictogram for ' + (widget.setup.name || widget.widget_kurzbz)">
 		<div class="card-body">
 			<h5 class="card-title">{{ widget.setup.name || widget.widget_kurzbz }}</h5>

public/js/components/Drop/Grid.js

@@ -2,7 +2,6 @@
 
 import GridItem from './Grid/Item.js';
 import GridLogic from '../../composables/GridLogic.js';
-import WidgetIcon from '../Dashboard/Widget/WidgetIcon.js';
 
 const MODE_IDLE = 0;
 const MODE_MOVE = 1;
@@ -12,9 +11,7 @@ export default {
 	name: 'Grid',
 	components: {
 		GridItem,
-		WidgetIcon,
 	},
-	inject: ["widgetsSetup"],
 	props: {
 		cols: Number,
 		items: Array,
@@ -55,6 +52,12 @@ export default {
 			additionalRow: null,
 		}
 	},
+	inject:{
+		sectionName: {
+			type: String,
+			default: '',
+		},
+	},
 	computed: {
 		rows() {
 			if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid)
@@ -293,7 +296,7 @@ export default {
 			
 			this.mode = MODE_MOVE;
 			this.draggedItem = item;
-			this.draggedItemIcon = document.getElementById(`widget${this.draggedItem?.data.widget}`);
+			this.draggedItemIcon = document.getElementById(`widget-${this.sectionName}-${this.draggedItem?.data.widget}`);
 			this.draggedOffset = [item.x - this.x, item.y - this.y];
 			this._dragStart(evt, item);
 		},
@@ -398,18 +401,13 @@ export default {
 		ref="container"
 		class="drop-grid position-relative h-0"
 		:style="gridStyle"
-		@touchmove="dragOver"
+		@touchmove.prevent="dragOver"
 		@touchend="dragCancel"
 		@dragover.prevent="dragOver"
 		@drop="dragEnd"
 		@mousemove="updateCursorOnMouseMove"
 		@mouseleave="mouseLeave">
 		<TransitionGroup tag="div">
-			<template v-for="(item,index) in placedItems">
-				<div class="dragged-widget-icon" :id="'widget'+item.data.widget" >
-					<widget-icon v-if="widgetsSetup" :widget="widgetSetup[item.data.widget]"></widget-icon>
-				</div>
-			</template>
 			<grid-item
 				v-for="(item,index) in (mode == 0 && active ? placedItems_withPlaceholders : placedItems)"
 				:key="item.data.id"