Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add Svelte example to README.md
  • Loading branch information
Tyler-Petrov committed Feb 13, 2026
commit b710dd2105c9631c32e2288b16d7749f2f1ecf01
64 changes: 64 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Demo: http://sortablejs.github.io/Sortable/
* React
* [ES2015+](https://github.com/SortableJS/react-sortablejs)
* [Mixin](https://github.com/SortableJS/react-mixin-sortablejs)
* [Svelte](#svelte)
* [Knockout](https://github.com/SortableJS/knockout-sortablejs)
* [Polymer](https://github.com/SortableJS/polymer-sortablejs)
* [Vue](https://github.com/SortableJS/Vue.Draggable)
Expand Down Expand Up @@ -672,6 +673,69 @@ Demo: https://jsbin.com/visimub/edit?html,js,output
---


<a name="svelte"></a>
### Svelte
Demo: https://svelte.dev/playground/498c42e864bb45c5ac05473a1718d6fb?version=5.50.3

```svelte
<script lang="ts">
import type { Attachment } from "svelte/attachments";
import Sortable, { type SortableOptions } from "sortablejs";

export function sortable(
options: SortableOptions = {},
): Attachment<HTMLDivElement> {
const abortController = new AbortController();
return (element) => {
/* Build sortable instance with the options */
const sortableInstance = new Sortable(element, options);

/* Disable context menu on touch devices */
const isTouchDevice =
window.matchMedia("(pointer: coarse)").matches;
if (isTouchDevice) {
element.addEventListener(
"contextmenu",
(event) => {
event.preventDefault();
console.log("contextmenu", event.target);
},
{
signal: abortController.signal,
},
);
}

return () => {
abortController.abort();
sortableInstance.destroy();
};
};
}
</script>

<div
{@attach sortable({
store: {
set: (sortable) => {
console.log(sortable.toArray());
},
get: (sortable) => {
return sortable.toArray();
},
},
})}
>
{#each [1, 2, 3, 4, 5] as item}
<div data-id={item}>{item}</div>
{/each}
</div>
```


---


### Static methods & properties


Expand Down