From 06ed2d7a9fe060b3dce6d8a40b9486dbb8024646 Mon Sep 17 00:00:00 2001
From: Seth Sharp <58869086+SethSharp@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:58:31 +1000
Subject: [PATCH 1/3] cooking

---
 app/components/Draggable/ExampleOne.vue    | 66 +++++++++++++++++
 app/components/Draggable/ExampleTwo.vue    | 84 ++++++++++++++++++++++
 app/pages/components/Draggable.vue         | 32 +++++++++
 app/pages/index.ts                         |  1 +
 app/router/index.ts                        |  7 ++
 src/components/draggable/DraggableArea.vue | 43 +++++++++++
 src/components/draggable/DraggableItem.vue | 50 +++++++++++++
 src/components/draggable/index.ts          |  4 ++
 src/components/draggable/useDraggable.ts   | 31 ++++++++
 src/index.ts                               |  1 +
 10 files changed, 319 insertions(+)
 create mode 100644 app/components/Draggable/ExampleOne.vue
 create mode 100644 app/components/Draggable/ExampleTwo.vue
 create mode 100644 app/pages/components/Draggable.vue
 create mode 100644 src/components/draggable/DraggableArea.vue
 create mode 100644 src/components/draggable/DraggableItem.vue
 create mode 100644 src/components/draggable/index.ts
 create mode 100644 src/components/draggable/useDraggable.ts

diff --git a/app/components/Draggable/ExampleOne.vue b/app/components/Draggable/ExampleOne.vue
new file mode 100644
index 0000000..505a7f4
--- /dev/null
+++ b/app/components/Draggable/ExampleOne.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {
+  DraggableArea,
+  DraggableItem,
+  useDraggable,
+} from "@/components/draggable"
+import { ref } from "vue"
+
+const {
+  draggableItem,
+  draggableIndex,
+  resetDraggable,
+} = useDraggable()
+
+const items = ref([
+  {
+    id: 1,
+    value: 'Item 1',
+  },
+  {
+    id: 2,
+    value: 'Item 2',
+  },
+  {
+    id: 3,
+    value: 'Item 3',
+  },
+  {
+    id: 4,
+    value: 'Item 4',
+  },
+  {
+    id: 5,
+    value: 'Item 5',
+  },
+])
+
+const handleDrop = (e: DragEvent) => {
+  if (!draggableItem.value || draggableIndex.value == null) return
+
+  // Remove from the original
+  items.value = items.value.filter((m) => m.id !== draggableItem.value.id)
+
+  items.value.splice(
+    draggableIndex.value,
+    0,
+    draggableItem.value,
+  )
+
+  resetDraggable()
+}
+</script>
+
+<template>
+  <DraggableArea data="area-1" @drop="handleDrop" class="w-full space-y-2 rounded border-2 border-dashed p-4">
+    <DraggableItem
+      v-for="(item, idx) in items"
+      :key="idx"
+      :data="item"
+      :index="idx"
+      class="cursor-move rounded border bg-white p-2"
+    >
+      {{ item.value }}
+    </DraggableItem>
+  </DraggableArea>
+</template>
diff --git a/app/components/Draggable/ExampleTwo.vue b/app/components/Draggable/ExampleTwo.vue
new file mode 100644
index 0000000..f20c053
--- /dev/null
+++ b/app/components/Draggable/ExampleTwo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {
+  DraggableArea,
+  DraggableItem,
+  useDraggable,
+} from "@/components/draggable"
+import { ref } from "vue"
+
+const {
+  draggedFromArea,
+  draggedToArea,
+  draggableItem,
+  draggableIndex,
+  resetDraggable,
+} = useDraggable()
+
+const jobs = ref({
+  'backlog': [
+    {
+      id: 1,
+      value: 'Item 1',
+    },
+    {
+      id: 2,
+      value: 'Item 2',
+    },
+  ],
+  'in_progress': [
+    {
+      id: 3,
+      value: 'Item 3',
+    },
+    {
+      id: 4,
+      value: 'Item 4',
+    },
+  ],
+  'finished': [
+    {
+      id: 5,
+      value: 'Item 5',
+    },
+    {
+      id: 6,
+      value: 'Item 6',
+    },
+  ],
+})
+
+const handleDrop = (e: DragEvent) => {
+  if (!draggableItem.value || draggableIndex.value == null) return
+
+  // Remove from the original
+  jobs.value[draggedFromArea.value] = jobs.value[draggedFromArea.value].filter((m) => m.id !== draggableItem.value.id)
+
+  jobs.value[draggedToArea.value].splice(
+    draggableIndex.value,
+    0,
+    draggableItem.value,
+  )
+
+  resetDraggable()
+}
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <DraggableArea v-for="(items, job) in jobs" :key="job" :data="job" @drop="handleDrop" class="w-full space-y-2 rounded border-2 border-dashed p-4">
+      <span>
+        {{ job }}
+      </span>
+
+      <DraggableItem
+        v-for="(item, idx) in items"
+        :key="idx"
+        :data="item"
+        :index="idx"
+        class="cursor-move rounded border bg-white p-2"
+      >
+        {{ item.value }}
+      </DraggableItem>
+    </DraggableArea>
+  </div>
+</template>
diff --git a/app/pages/components/Draggable.vue b/app/pages/components/Draggable.vue
new file mode 100644
index 0000000..0d7b0f2
--- /dev/null
+++ b/app/pages/components/Draggable.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ExampleOne from "@app/components/Draggable/ExampleOne.vue"
+import ExampleTwo from "@app/components/Draggable/ExampleTwo.vue"
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <h2>
+        Example One
+      </h2>
+
+      <h3>
+        Single Draggable Area
+      </h3>
+
+      <ExampleOne />
+    </div>
+
+    <div>
+      <h2>
+        Example Two
+      </h2>
+
+      <h3>
+        Multiple Draggable Areas
+      </h3>
+
+      <ExampleTwo />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/index.ts b/app/pages/index.ts
index 4b9c550..ec75615 100644
--- a/app/pages/index.ts
+++ b/app/pages/index.ts
@@ -21,6 +21,7 @@ export { default as Combobox } from "./components/Combobox.vue"
 export { default as Command } from "./components/Command.vue"
 export { default as ConfirmDialog } from "./components/ConfirmDialog.vue"
 export { default as Dialog } from "./components/Dialog.vue"
+export { default as Draggable } from "./components/Draggable.vue"
 export { default as Drawer } from "./components/Drawer.vue"
 export { default as DropdownMenu } from "./components/DropdownMenu.vue"
 export { default as Flasher } from "./components/Flasher.vue"
diff --git a/app/router/index.ts b/app/router/index.ts
index 8ab4844..ad949fe 100644
--- a/app/router/index.ts
+++ b/app/router/index.ts
@@ -25,6 +25,7 @@ import {
   Command,
   ConfirmDialog,
   Dialog,
+  Draggable,
   Drawer,
   DropdownMenu,
   Flasher,
@@ -132,6 +133,12 @@ const routes = [
         component: ConfirmDialog,
         meta: { layout: ComponentLayout, shadcn: false },
       },
+      {
+        name: "Draggable",
+        path: "/components/draggable",
+        component: Draggable,
+        meta: { layout: ComponentLayout, shadcn: false },
+      },
       {
         name: "Dropdown Menu",
         path: "/components/dropdown-menu",
diff --git a/src/components/draggable/DraggableArea.vue b/src/components/draggable/DraggableArea.vue
new file mode 100644
index 0000000..6c469e0
--- /dev/null
+++ b/src/components/draggable/DraggableArea.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { createContext } from '@/lib/createContext'
+
+export const [injectDraggableRootContext, provideDraggableRootContext] =
+    createContext('DraggableRoot')
+</script>
+
+<script setup lang="ts">
+import { useDraggable } from '.'
+import { defineEmits } from 'vue'
+
+const props = defineProps<{
+  class?: string
+    data: any
+}>()
+
+const emit = defineEmits<{
+    (e: 'drop', payload: { event: DragEvent; data: any }): void
+}>()
+
+const draggable = useDraggable()
+
+provideDraggableRootContext(draggable)
+
+const handleDrop = (event: DragEvent) => emit('drop', event)
+
+const allowDrop = (event: DragEvent) => {
+    event.preventDefault()
+    draggable.draggedToArea.value = props.data
+}
+
+const onDragStart = () => (draggable.draggedFromArea.value = props.data)
+</script>
+
+<template>
+    <div
+        :class="props.class"
+        @drop="handleDrop"
+        @dragstart="onDragStart"
+        @dragover="allowDrop">
+        <slot />
+    </div>
+</template>
diff --git a/src/components/draggable/DraggableItem.vue b/src/components/draggable/DraggableItem.vue
new file mode 100644
index 0000000..7fcc200
--- /dev/null
+++ b/src/components/draggable/DraggableItem.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import { injectDraggableRootContext } from './DraggableArea.vue'
+
+const props = defineProps<{
+    class?: string
+    data: any
+    index: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'dragstart', { event: DragEvent, data: any }): void
+    (e: 'dragend', event: DragEvent): void
+    (e: 'dragover', index: number): void
+}>()
+
+const onDragStart = (event: DragEvent) => {
+    context.draggableItem.value = props.data
+    emit('dragstart', {
+        event: event,
+        data: props.data,
+    })
+}
+
+const context = injectDraggableRootContext()
+
+const onDragOver = () => {
+    context.draggableIndex.value = props.index
+
+    emit('dragover', props.index)
+}
+
+const onDragEnd = (event: DragEvent) => {
+    context.draggableItem.value = null
+    context.draggableIndex.value = null
+
+    emit('dragend', event)
+}
+</script>
+
+<template>
+    <div
+        :class="props.class"
+        draggable="true"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @dragover="onDragOver">
+        <slot :item="data" />
+    </div>
+</template>
diff --git a/src/components/draggable/index.ts b/src/components/draggable/index.ts
new file mode 100644
index 0000000..c95ffdd
--- /dev/null
+++ b/src/components/draggable/index.ts
@@ -0,0 +1,4 @@
+export { default as DraggableArea } from './DraggableArea.vue'
+export { default as DraggableItem } from './DraggableItem.vue'
+
+export { useDraggable } from './useDraggable'
diff --git a/src/components/draggable/useDraggable.ts b/src/components/draggable/useDraggable.ts
new file mode 100644
index 0000000..6c07b34
--- /dev/null
+++ b/src/components/draggable/useDraggable.ts
@@ -0,0 +1,31 @@
+import { ref, type Ref } from 'vue'
+
+export type DraggableContext = {
+    draggedFromArea: Ref<any>
+    draggedToArea: Ref<any>
+    draggableItem: Ref<any | null>
+    draggableIndex: Ref<number | null>
+    resetDraggable: () => void
+}
+
+const draggedFromArea = ref<any>(null)
+const draggedToArea = ref<any>(null)
+const draggableItem = ref<any | null>(null)
+const draggableIndex = ref<number | null>(null)
+
+const resetDraggable = () => {
+    draggedFromArea.value = null
+    draggedToArea.value = null
+    draggableItem.value = null
+    draggableIndex.value = null
+}
+
+export function useDraggable(): DraggableContext {
+    return {
+        draggedFromArea,
+        draggedToArea,
+        draggableItem,
+        draggableIndex,
+        resetDraggable,
+    }
+}
diff --git a/src/index.ts b/src/index.ts
index 8efc219..45b3fbe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,6 +27,7 @@ export * from "@/components/collapsible"
 export * from "@/components/combobox"
 export * from "@/components/command"
 export * from "@/components/dialog"
+export * from "@/components/draggable"
 export * from "@/components/drawer"
 export * from "@/components/dropdown-menu"
 export * from "@/components/input"

From a4c3b58bbfb0c5cd753be41f2c782c3f9c2d8ab2 Mon Sep 17 00:00:00 2001
From: Seth Sharp <58869086+SethSharp@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:59:29 +1000
Subject: [PATCH 2/3] create context

---
 src/index.ts             |  1 +
 src/lib/createContext.ts | 57 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/lib/createContext.ts

diff --git a/src/index.ts b/src/index.ts
index 8efc219..ac5cfbb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,7 @@ import { DropdownMenuPortal } from "radix-vue"
 
 // utils
 export * from "@/lib/utils"
+export * from "@/lib/createContext"
 
 // custom components
 export * from "@/components/confirm-dialog"
diff --git a/src/lib/createContext.ts b/src/lib/createContext.ts
new file mode 100644
index 0000000..47f330a
--- /dev/null
+++ b/src/lib/createContext.ts
@@ -0,0 +1,57 @@
+import type { InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export function createContext<ContextValue>(
+  providerComponentName: string | string[],
+  contextName?: string,
+) {
+  const symbolDescription
+    = typeof providerComponentName === 'string' && !contextName
+    ? `${providerComponentName}Context`
+    : contextName
+
+  const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
+
+  /**
+   * @param fallback The context value to return if the injection fails.
+   *
+   * @throws When context injection failed and no fallback is specified.
+   * This happens when the component injecting the context is not a child of the root component providing the context.
+   */
+  const injectContext = <
+    T extends ContextValue | null | undefined = ContextValue,
+  >(
+    fallback?: T,
+  ): T extends null ? ContextValue | null : ContextValue => {
+    const context = inject(injectionKey, fallback)
+    if (context)
+      return context
+
+    if (context === null)
+      return context as any
+
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
+        Array.isArray(providerComponentName)
+          ? `one of the following components: ${providerComponentName.join(
+            ', ',
+          )}`
+          : `\`${providerComponentName}\``
+      }`,
+    )
+  }
+
+  const provideContext = (contextValue: ContextValue) => {
+    provide(injectionKey, contextValue)
+    return contextValue
+  }
+
+  return [injectContext, provideContext] as const
+}

From 6b98384590a37442ead443f9fac8cf773ec0f9e9 Mon Sep 17 00:00:00 2001
From: Seth Sharp <58869086+SethSharp@users.noreply.github.com>
Date: Wed, 1 Oct 2025 16:00:04 +1000
Subject: [PATCH 3/3] add credit

---
 src/lib/createContext.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/createContext.ts b/src/lib/createContext.ts
index 47f330a..c089c4a 100644
--- a/src/lib/createContext.ts
+++ b/src/lib/createContext.ts
@@ -1,3 +1,7 @@
+/**
+ * Full credit goes to shadcn: // https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/createContext.ts
+ */
+
 import type { InjectionKey } from 'vue'
 import { inject, provide } from 'vue'