From 87c8caa8818c1cd1a02963d488563c7cb4320a06 Mon Sep 17 00:00:00 2001
From: SpikeySanju <spikeysanju98@gmail.com>
Date: Tue, 12 Nov 2024 23:17:12 +0530
Subject: [PATCH] docs: add example for custom classes in drag and drop states

---
 README.md | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/README.md b/README.md
index 3cd65c5..cccfa41 100644
--- a/README.md
+++ b/README.md
@@ -285,6 +285,121 @@ interface DragDropState<T = unknown> {
 </div>
 ```
 
+### Custom Classes for Drag and Drop States
+
+```svelte
+<script lang="ts">
+	import { draggable, droppable, type DragDropState } from '$lib/index.js';
+	import { flip } from 'svelte/animate';
+	import { fade } from 'svelte/transition';
+
+	interface Item {
+		id: string;
+		title: string;
+		description: string;
+		priority: 'low' | 'medium' | 'high';
+	}
+
+	const items = $state<Item[]>([
+		{
+			id: '1',
+			title: 'Design System Updates',
+			description: 'Update color palette and component library',
+			priority: 'high'
+		},
+		{
+			id: '2',
+			title: 'User Research',
+			description: 'Conduct interviews with 5 key customers',
+			priority: 'medium'
+		},
+		{
+			id: '3',
+			title: 'API Documentation',
+			description: 'Document new endpoints and examples',
+			priority: 'low'
+		}
+	]);
+
+	function handleDrop(state: DragDropState<Item>) {
+		const { draggedItem, targetContainer } = state;
+		const dragIndex = items.findIndex((item: Item) => item.id === draggedItem.id);
+		const dropIndex = parseInt(targetContainer ?? '0');
+
+		if (dragIndex !== -1 && !isNaN(dropIndex)) {
+			const [item] = items.splice(dragIndex, 1);
+			items.splice(dropIndex, 0, item);
+		}
+	}
+
+	const getPriorityColor = (priority: Item['priority']) => {
+		return {
+			low: 'bg-blue-50 text-blue-700',
+			medium: 'bg-yellow-50 text-yellow-700',
+			high: 'bg-red-50 text-red-700'
+		}[priority];
+	};
+</script>
+
+<div class="min-h-screen bg-gray-50 p-8">
+	<div class="mb-8 flex flex-col gap-2">
+		<h1 class="text-2xl font-bold text-gray-900">Sortable List</h1>
+		<p class="text-gray-600">Drag and drop items to reorder them in the list.</p>
+	</div>
+
+	<div class="w-80">
+		<div class="rounded-xl bg-gray-100 p-4 shadow-sm ring-1 ring-gray-200">
+			<div class="space-y-3">
+				{#each items as item, index (item.id)}
+					<div
+						use:draggable={{ container: index.toString(), dragData: item }}
+						use:droppable={{
+							container: index.toString(),
+							callbacks: { onDrop: handleDrop },
+							attributes: {
+								draggingClass: 'border border-blue-500',
+								dragOverClass: 'border border-red-500'
+							}
+						}}
+						animate:flip={{ duration: 200 }}
+						in:fade={{ duration: 150 }}
+						out:fade={{ duration: 150 }}
+						class="svelte-dnd-touch-feedback cursor-move rounded-lg bg-white p-3 shadow-sm
+                               ring-gray-200 transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-200"
+					>
+						<div class="mb-2 flex items-start justify-between gap-2">
+							<h3 class="font-medium text-gray-900">
+								{item.title}
+							</h3>
+							<span
+								class={`rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityColor(
+									item.priority
+								)}`}
+							>
+								{item.priority}
+							</span>
+						</div>
+						<p class="text-sm text-gray-500">
+							{item.description}
+						</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	:global(.dragging) {
+		@apply opacity-50 shadow-lg ring-2 ring-blue-400;
+	}
+
+	:global(.drag-over) {
+		@apply bg-blue-50;
+	}
+</style>
+```
+
 ### Additional Examples
 
 - **[Kanban Board](https://github.com/thisuxhq/SvelteDnD/blob/main/src/routes/+page.svelte)**: Find the example in `src/routes/+page.svelte`.
@@ -292,6 +407,7 @@ interface DragDropState<T = unknown> {
 - **[Grid Sort](https://github.com/thisuxhq/SvelteDnD/blob/main/src/routes/grid-sort/+page.svelte)**: Check out the implementation in `src/routes/grid-sort/+page.svelte`.
 - **[Horizontal Scroll](https://github.com/thisuxhq/SvelteDnD/blob/main/src/routes/horizontal-scroll/+page.svelte)**: See how it works in `src/routes/horizontal-scroll/+page.svelte`.
 - **[Nested Containers](https://github.com/thisuxhq/SvelteDnD/blob/main/src/routes/nested/+page.svelte)**: Explore the example in `src/routes/nested/+page.svelte`.
+- **[Custom Classes](https://github.com/thisuxhq/SvelteDnD/blob/main/src/routes/custom-classes/+page.svelte)**: Explore the example in `src/routes/custom-classes/+page.svelte`.
 
 ## Styling