Patch de l'afficage du drag and drop

src/ImageMiningView/ImageMiningView.ts

@@ -62,7 +62,7 @@ export default defineComponent({
 			const fileIds: number[] = await response.json()
 
 			for(const fileId of fileIds) {
-				const response = await secureFetch(this, import.meta.env.VITE_BACKEND_URL + '/image/${fileId}')
+				const response = await secureFetch(this, import.meta.env.VITE_BACKEND_URL + `/image/${fileId}`)
 				const contentDisposition = response.headers.get("Content-Disposition")
 				if(!contentDisposition) {
 					console.log("warning: incomplete filename")
@@ -81,7 +81,7 @@ export default defineComponent({
 			let original: HTMLDivElement | HTMLParagraphElement = this.currentDrag.target
 			if(original.nodeName !== 'DIV') {
 				//@ts-expect-error P's parent is a div
-				original = original.parent
+				original = original.parentNode
 			}
 			original.style.opacity = '1'
 
@@ -90,8 +90,7 @@ export default defineComponent({
 			//@ts-expect-error Target is generic
 			let newTargetParagraph: HTMLParagraphElement | HTMLDivElement | HTMLInputElement = e.target
 			if(newTargetParagraph.nodeName !== 'DIV') {
-				//@ts-expect-error parent cannot be div
-				newTargetParagraph = newTargetParagraph.parent as HTMLDivElement
+				newTargetParagraph = newTargetParagraph.parentNode as HTMLDivElement
 			}
 			if(!newTargetParagraph) return
 			const newInput = newTargetParagraph.querySelector('input') as HTMLInputElement
@@ -118,28 +117,32 @@ export default defineComponent({
 		},
 
 		enter(e: Event) {
+			e.preventDefault()
 			//@ts-expect-error target is generic
 			let target: HTMLDivElement | HTMLParagraphElement | null = e.target
 			if(!target) return
 
-			if(target.nodeName === 'P') {
+			if(target.nodeName !== 'DIV') {
 				//@ts-expect-error P's parent is a div
-				target = target.parent
+				target = target.parentNode
 				if(!target)return
 			}
-			target.style.marginLeft = "40px"
-			e.preventDefault()
+
+			if(this.currentDrag.target === target) return
+
+			target.style.marginLeft = '40px'
 		},
 
 		exit(e: Event) {
 			//@ts-expect-error target is generic
 			let target: HTMLDivElement | HTMLParagraphElement | null = e.target
 			if(!target) return
-			if(target.nodeName === 'P') {
+			if(target.nodeName !== 'DIV') {
 				//@ts-expect-error P's parent is a div
-				target = target.parent
+				target = target.parentNode
 				if(!target)return
 			}
+			if(this.currentDrag.target === target) return
 			target.style.marginLeft = "auto"
 			e.preventDefault()
 		},

src/ImageMiningView/ImageMiningView.vue

@@ -18,7 +18,7 @@
 							@dragexit="exit"
 						>
 							<img :src="file.src" class="fullscreenimg"
-								@dragstart="() => false"
+								@dragstart="(e) => { e.preventDefault(); return false }"
 								@mouseover="currentOver = file.id"
 								@mouseleave="currentOver = null"
 								alt=""