diff --git a/www/content/examples/sortable.md b/www/content/examples/sortable.md
index 7380ccc0..8b571788 100644
--- a/www/content/examples/sortable.md
+++ b/www/content/examples/sortable.md
@@ -13,9 +13,25 @@ htmx.onLoad(function(content) {
     var sortables = content.querySelectorAll(".sortable");
     for (var i = 0; i < sortables.length; i++) {
       var sortable = sortables[i];
-      new Sortable(sortable, {
+      var sortableInstance = new Sortable(sortable, {
           animation: 150,
-          ghostClass: 'blue-background-class'
+          ghostClass: 'blue-background-class',
+
+          // Make the `.htmx-indicator` unsortable
+          filter: ".htmx-indicator",
+          onMove: function (evt) {
+            return evt.related.className.indexOf('htmx-indicator') === -1;
+          },
+
+          // Disable sorting on the `end` event
+          onEnd: function (evt) {
+            this.option("disabled", true);
+          }
+      });
+
+      // Re-enable sorting on the `htmx:afterSwap` event
+      sortable.addEventListener("htmx:afterSwap", function() {
+        sortableInstance.option("disabled", false);
       });
     }
 })
@@ -54,9 +70,25 @@ That's it!
         var sortables = content.querySelectorAll(".sortable");
         for (var i = 0; i < sortables.length; i++) {
           var sortable = sortables[i];
-          new Sortable(sortable, {
+          var sortableInstance = new Sortable(sortable, {
               animation: 150,
-              ghostClass: 'blue-background-class'
+              ghostClass: 'blue-background-class',
+
+              // Make the `.htmx-indicator` unsortable
+              filter: ".htmx-indicator",
+              onMove: function (evt) {
+                return evt.related.className.indexOf('htmx-indicator') === -1;
+              },
+
+              // Disable sorting on the `end` event
+              onEnd: function (evt) {
+                this.option("disabled", true);
+              }
+          });
+
+          // Re-enable sorting on the `htmx:afterSwap` event
+          sortable.addEventListener("htmx:afterSwap", function() {
+            sortableInstance.option("disabled", false);
           });
         }
     })
@@ -64,7 +96,7 @@ That's it!
     var listItems = [1, 2, 3, 4, 5]
     // routes
     init("/demo", function(request, params){
-      return '<form id=example1" class="list-group col sortable" hx-post="/items" hx-trigger="end">' +
+      return '<form id="example1" class="list-group col sortable" hx-post="/items" hx-trigger="end">' +
       listContents()
       + "\n</form>";
     });
@@ -77,8 +109,8 @@ That's it!
     
     // templates
     function listContents() {
-      return '<div class="htmx-indicator">Updating...</div>' + listItems.map(function(val) {
-        return "  <div style='border:1px solid #DEDEDE; padding:12px; margin: 8px; width:200px' ><input type='hidden' name='item' value='" + val + "'/> Item " + val +"</div>";
+      return '<div class="htmx-indicator" style="cursor: default">Updating...</div>' + listItems.map(function(val) {
+        return `  <div style="border:1px solid #DEDEDE; padding:12px; margin: 8px; width:200px; cursor: grab" ondrag="this.style.cursor = 'grabbing'" ><input type="hidden" name="item" value="` + val + `"/> Item ` + val + `</div>`;
       }).join("\n");
     }