From b710dd2105c9631c32e2288b16d7749f2f1ecf01 Mon Sep 17 00:00:00 2001
From: Tyler Petrov <tylerpetrov16@gmail.com>
Date: Fri, 13 Feb 2026 09:32:45 -0600
Subject: [PATCH 1/2] Add Svelte example to README.md

---
 README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/README.md b/README.md
index c95740711..a8b4abdcf 100644
--- a/README.md
+++ b/README.md
@@ -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)
@@ -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
 
 

From e9939281c666e4300a4538c9dcfed45c428f7694 Mon Sep 17 00:00:00 2001
From: Tyler Petrov <tylerpetrov16@gmail.com>
Date: Fri, 13 Feb 2026 09:34:25 -0600
Subject: [PATCH 2/2] Move Svelte example above Bootstrap

---
 README.md | 64 +++++++++++++++++++++++++++----------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index a8b4abdcf..4fe4ec815 100644
--- a/README.md
+++ b/README.md
@@ -641,38 +641,6 @@ Sortable.create(el, {
 ---
 
 
-<a name="bs"></a>
-### Bootstrap
-Demo: https://jsbin.com/visimub/edit?html,js,output
-
-```html
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
-
-
-<!-- Latest Sortable -->
-<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
-
-
-<!-- Simple List -->
-<ul id="simpleList" class="list-group">
-	<li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
-	<li class="list-group-item">It works with Bootstrap...</li>
-	<li class="list-group-item">...out of the box.</li>
-	<li class="list-group-item">It has support for touch devices.</li>
-	<li class="list-group-item">Just drag some elements around.</li>
-</ul>
-
-<script>
-    // Simple list
-    Sortable.create(simpleList, { /* options */ });
-</script>
-```
-
-
----
-
-
 <a name="svelte"></a>
 ### Svelte
 Demo: https://svelte.dev/playground/498c42e864bb45c5ac05473a1718d6fb?version=5.50.3
@@ -736,6 +704,38 @@ Demo: https://svelte.dev/playground/498c42e864bb45c5ac05473a1718d6fb?version=5.5
 ---
 
 
+<a name="bs"></a>
+### Bootstrap
+Demo: https://jsbin.com/visimub/edit?html,js,output
+
+```html
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- Latest Sortable -->
+<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
+
+
+<!-- Simple List -->
+<ul id="simpleList" class="list-group">
+	<li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
+	<li class="list-group-item">It works with Bootstrap...</li>
+	<li class="list-group-item">...out of the box.</li>
+	<li class="list-group-item">It has support for touch devices.</li>
+	<li class="list-group-item">Just drag some elements around.</li>
+</ul>
+
+<script>
+    // Simple list
+    Sortable.create(simpleList, { /* options */ });
+</script>
+```
+
+
+---
+
+
 ### Static methods & properties