fix: removing the classes from the container after not dragging over …

…anymore

src/lib/actions/droppable.ts

@@ -10,7 +10,11 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 		if (options.disabled) return;
 		event.preventDefault();
 
+		const target = event.target as HTMLElement;
+
 		dndState.targetContainer = options.container;
+		dndState.targetElement = target;
+
 		node.classList.add(...dragOverClass);
 		options.callbacks?.onDragEnter?.(dndState as DragDropState<T>);
 	}
@@ -19,11 +23,16 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 		if (options.disabled) return;
 
 		const target = event.target as HTMLElement;
-		if (!node.contains(target)) {
-			dndState.targetContainer = null;
-			node.classList.remove(...dragOverClass);
-			options.callbacks?.onDragLeave?.(dndState as DragDropState<T>);
-		}
+
+		// check if element is still being dragged over
+		if (!dndState.targetElement?.isSameNode(target)) return;
+
+		node.classList.remove(...dragOverClass);
+
+		options.callbacks?.onDragLeave?.(dndState as DragDropState<T>);
+
+		dndState.targetContainer = null;
+		dndState.targetElement = null;
 	}
 
 	function handleDragOver(event: DragEvent) {

src/lib/stores/dnd.svelte.ts

@@ -5,5 +5,6 @@ export const dndState = $state<DragDropState>({
 	isDragging: false,
 	draggedItem: null,
 	sourceContainer: '',
-	targetContainer: null
+	targetContainer: null,
+	targetElement: null
 });

src/lib/types/index.ts

@@ -3,6 +3,7 @@ export interface DragDropState<T = unknown> {
 	draggedItem: T;
 	sourceContainer: string;
 	targetContainer: string | null;
+	targetElement: HTMLElement | null;
 }
 
 export interface DragDropCallbacks<T = unknown> {

src/routes/custom-classes/+page.svelte

@@ -67,8 +67,8 @@
 							container: index.toString(),
 							callbacks: { onDrop: handleDrop },
 							attributes: {
-								draggingClass: 'custom-dragging ring-1 ring-blue-500',
-								dragOverClass: 'custom-drag-over ring-1 ring-red-500'
+								draggingClass: 'border border-blue-500',
+								dragOverClass: 'border border-red-500'
 							}
 						}}
 						animate:flip={{ duration: 200 }}