chore: add DpDraggable to Storybook.

CHANGELOG.md

@@ -6,6 +6,7 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ### Added
 
+- ([#497](https://github.com/demos-europe/demosplan-ui/pull/497)) Add DpDraggable documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#491](https://github.com/demos-europe/demosplan-ui/pull/491)) Add DpStickyElement documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 
 ## v0.1.13 - 2023-08-30

src/components/DpDraggable/DpDraggable.stories.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs'
+import DpDraggable from './DpDraggable'
+
+<Meta
+    title="Components/Draggable"
+    component={DpDraggable}
+/>
+
+# Draggable
+
+Use the Draggable component to change the order of items within a list.
+
+
+## Default usage
+
+```html
+<dp-draggable
+    v-model="currentList"
+    :opts="draggableOptions">
+    <div class="o-sortablelist__item u-pv-0_5 u-pl-0_5 border--top">
+      <p>Content 1</p>
+    </div>
+    <div class="o-sortablelist__item u-pv-0_5 u-pl-0_5 border--top">
+      <p>Content 2</p>
+    </div>
+</dp-draggable>
+```
+

src/components/DpDraggable/DpDraggable.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue'
+import DpDraggable from './DpDraggable.vue'
+
+const meta: Meta<typeof DpDraggable> = {
+    component: DpDraggable,
+    title: "Components/Draggable",
+    render: (args) => ({
+        components: {
+            DpDraggable,
+        },
+        setup() {
+            return { args }
+        },
+        template: `<dp-draggable v-bind="args">
+          <div class="o-sortablelist__item u-pv-0_5 u-pl-0_5 border--top">
+            <p>Content 1</p>
+          </div>
+          <div class="o-sortablelist__item u-pv-0_5 u-pl-0_5 border--top">
+            <p>Content 2</p>
+          </div>
+        </dp-draggable>`,
+    })
+}
+
+interface IDpDraggable {
+    contentData: string[]
+    'data:change': object
+}
+
+type Story = StoryObj<IDpDraggable>
+
+export default meta
+
+export const Default: Story = {
+    args: {
+        contentData: ['Content 1', 'Content 2']
+    },
+    argTypes: {
+        'data:change': { action: 'data:change' }
+    }
+}