chore: add DpDraggable to Storybook. (#497)

* chore: add DpDraggable to Storybook.

* chore: add CHANGELOG

* Update src/components/DpDraggable/DpDraggable.stories.mdx

Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com>

* chore: adjust Docu.

* chore: adjust Docu.

* chore: adjust Docu.

* chore: rebuild DpDraggable template.

---------

Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com>

CHANGELOG.md

@@ -11,6 +11,7 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 - ([#504](https://github.com/demos-europe/demosplan-ui/pull/504)) Add DpSlidingPagination documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#503](https://github.com/demos-europe/demosplan-ui/pull/503)) Add DpFormRow documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
+- ([#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,27 @@
+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
+        v-for="item in currentList"
+        :key="item.id">
+        {{ item.name }}
+    </div>
+</dp-draggable>
+```
+

src/components/DpDraggable/DpDraggable.stories.tsx

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