fix(ui): default drag actions triggering while dragging cards

src/ui/components/DraggableCard.ts

@@ -1,4 +1,5 @@
 const registeredContainers = new Set<Element>()
+let isDragging = false
 
 export class DraggableCard extends HTMLElement {
 	container: HTMLElement
@@ -18,27 +19,31 @@ export class DraggableCard extends HTMLElement {
 			this.container.addEventListener('dragenter', this.handleDragOver)
 			this.container.addEventListener('dragover', this.handleDragOver)
 		}
+
+		this.addEventListener('dragstart', this.handleDragStart)
+		this.addEventListener('dragend', this.handleDragEnd)
+		this.addEventListener('drop', this.handleDrop)
 	}
 
 	handleDragStart = (event: DragEvent) => {
 		if (event.dataTransfer === null || !(event.target instanceof Element)) {
 			return
 		}
 
-		if (this.container) {
-			const draggedEl = Array.from(this.container.children).find((el) => el === event.target)
-			if (draggedEl) {
-				event.dataTransfer.effectAllowed = 'move'
-				event.dataTransfer.dropEffect = 'move'
-				event.dataTransfer.setData('text/plain', draggedEl.id)
-			}
+		const draggedEl = Array.from(this.container.children).find((el) => el === event.target)
+		if (draggedEl) {
+			isDragging = true
+			event.dataTransfer.effectAllowed = 'move'
+			event.dataTransfer.dropEffect = 'move'
+			event.dataTransfer.setData('text/plain', draggedEl.id)
 		}
 	}
 
 	handleDragEnd = (event: DragEvent) => {
 		const draggedEl = getDragEventData(event, this.container)
 		if (draggedEl) {
 			drop(this.container, draggedEl, event.clientX)
+			isDragging = false
 		}
 	}
 
@@ -48,6 +53,12 @@ export class DraggableCard extends HTMLElement {
 			event.preventDefault()
 		}
 	}
+
+	handleDrop = (event: DragEvent) => {
+		if (isDragging) {
+			event.preventDefault()
+		}
+	}
 }
 
 function getDragEventData (event: DragEvent, container: Element): Element | null {

src/ui/components/JokerCard.ts

@@ -59,9 +59,6 @@ export class JokerCard extends DraggableCard {
 
 		this.suitSelect = this.fragment.querySelector('[data-j-suit]') as HTMLSelectElement
 		this.suitSelect.name = `joker-suit-${id}`
-
-		this.addEventListener('dragstart', this.handleDragStart)
-		this.addEventListener('dragend', this.handleDragEnd)
 	}
 
 	get [Symbol.toStringTag] () {

src/ui/components/PlayingCard.ts

@@ -60,8 +60,6 @@ export class PlayingCard extends DraggableCard {
 				this.isPlayedCheckbox.click()
 			}
 		}, { capture: true })
-		this.addEventListener('dragstart', this.handleDragStart)
-		this.addEventListener('dragend', this.handleDragEnd)
 	}
 
 	get [Symbol.toStringTag] () {