Svelte Drag Drop

This component is designed to effortlessly showcase a dynamic list of items, primarily images, allowing users to easily reorder them via intuitive drag-and-drop functionality.

Utilizing this component is a breeze—simply set the 'items' prop, and you're good to go!

:rocket: Installation

You can install the svelte-drag-drop component from npm by running the following command:
``
$ npm install @kuiper/svelte-drag-drop
`


https://github.com/kofkuiper/svelte-drag-drop/assets/104291370/eed53dd0-fd17-48ae-ae3c-db2827b0bb96

:fire: Usage

$3

`ts




`

$3

`ts


bind:items
on:onDragStart={(e) => onDragStart(e.detail)}
on:onDrag={(e) => onDrag(e.detail)}
on:onDragEnd={(e) => onDragEnd(e.detail)}
on:onDragEnter={(e) => onDragEnter(e.detail)}
on:onDragOver={(e) => onDragOver(e.detail)}
on:onDragLeave={(e) => onDragLeave(e.detail)}
on:onDrop={(e) => onDrop(e.detail)}
/>

`

:tada: Props

- items: images list (required)
- (optional)
- onDragStart: The user starts dragging an element or text selection.
- onDrag: An element or text selection is being dragged (every 350ms).
- onDragEnd: A drag operation is being ended (by releasing a mouse button or hitting the escape key).
- onDragEnter: A dragged element or text selection enters a valid drop target.
- onDragOver: An element or text selection is being dragged over a valid drop target (every 350ms).
- onDragLeave: A dragged element or text selection leaves a valid drop target.
- onDrop`: An element is dropped on a valid drop target.