Drag and drop cards to move between doing/considering

app/javascript/controllers/drag_and_drop_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "item", "container" ]
+  static values = { url: String }
+  static classes = [ "draggedItem", "hoverContainer" ]
+
+  // Actions
+
+  async dragStart(event) {
+    event.dataTransfer.effectAllowed = "move"
+    event.dataTransfer.dropEffect = "move"
+    event.dataTransfer.setData("37ui/move", event.target)
+
+    await nextFrame()
+    this.dragItem = this.#itemContaining(event.target)
+    this.sourceContainer = this.#containerContaining(this.dragItem)
+    this.dragItem.classList.add(this.draggedItemClass)
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+    const container = this.#containerContaining(event.target)
+    this.#clearContainerHoverClasses()
+
+    if (!container) { return }
+
+    if (container !== this.sourceContainer) {
+      container.classList.add(this.hoverContainerClass)
+    }
+  }
+
+  async drop(event) {
+    const container = this.#containerContaining(event.target)
+
+    if (!container) { return }
+
+    await this.#submitDropRequest(this.dragItem, container)
+
+    this.wasDropped = true
+  }
+
+  dragEnd() {
+    this.dragItem.classList.remove(this.draggedItemClass)
+    this.#clearContainerHoverClasses()
+
+    if (this.wasDropped) {
+      this.dragItem.remove()
+    }
+
+    this.sourceContainer = null
+    this.dragItem = null
+    this.wasDropped = false
+  }
+
+  #itemContaining(element) {
+    return this.itemTargets.find(item => item.contains(element) || item === element)
+  }
+
+  #containerContaining(element) {
+    return this.containerTargets.find(container => container.contains(element) || container === element)
+  }
+
+  #clearContainerHoverClasses() {
+    this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
+  }
+
+  // Private
+
+  async #submitDropRequest(item, container) {
+    const body = new FormData()
+    const id = item.dataset.id
+    const containerTarget = container.dataset.dropTarget
+
+    body.append("dropped_item_id", id)
+    body.append("drop_target", containerTarget)
+    return post(this.urlValue, { body, headers: { Accept: "text/vnd.turbo-stream.html" } })
+  }
+}