Make checklist entries sortable by d&d

app/javascript/controllers/drag_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { put } from "@rails/request.js";
+
+// Connects to data-controller="drag"
+export default class extends Controller {
+  static values = {
+    group: String
+  }
+
+  connect() {
+    this.element.style.cursor = "grab"
+    new Sortable(this.element, {
+      group: this.groupValue,
+      onEnd: this.onEnd,
+      animation: 150,
+      swap: true,
+      swapThreshold: 0.65,
+      ghostClass: 'dragFrom',
+      swapClass: 'dragTo',
+      forceFallback: false,
+    })
+    
+  }
+
+  onEnd(event) {
+    const position = event.newIndex + 1
+    const url = event.item.dataset["sortableUrl"]
+    // Expect backend to update list items via turbo if necessary
+    put(url, {
+      body: JSON.stringify({ checklist_entry: { position: position }}),
+      contentType: "application/json",
+      headers: {
+        "Accept": "text/vnd.turbo-stream.html, text/html, application/xhtml+xml"
+      }
+    })
+  }
+}

app/javascript/controllers/index.js

@@ -13,6 +13,9 @@ application.register("check-link", CheckLinkController)
 import CollapseChevronTogglerController from "./collapse_chevron_toggler_controller"
 application.register("collapse-chevron-toggler", CollapseChevronTogglerController)
 
+import DragController from "./drag_controller"
+application.register("drag", DragController)
+
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)