Svelte Sortable Drang & Drop Demo Project

This is a reference / demo project in SvelteKit for drag and drop / sortable-lists applications. This project uses the native SortableJs that can be used for vanilla JavaScript applications.

Disclaimer

This project uses a forked version of the SortableJs library.

This fork mainly addresses the data binding with the DOM rendering. Thus beeing able to use it natively with SvelteJs.

Hopefuly in the near future the PRs get merged so we could all enjoy this functionality natively.

Install

1. git clone https:/roy-mdr/Svelte-Sortable-Drag-and-Drop.git
2. cd Svelte-Sortable-Drag-and-Drop
3. npm i
4. npm run dev

Install custom fork for your project

npm install roy-mdr/Sortable#roy instead of npm install sortablejs

Issues and acknowledges

• Highly lacking accessibility interaction
• Some Svelte related DOM-breaking situations (already addressed and worked-arround in this project)
• Bugs / caveats form the SortableJs library such as:
  • Don't set transition: all ...; to a Sortable Element.
  • Don't set display: none; to every children of a Sortable Element