Merge pull request #209 from basecamp/drag-jankiness

Fix divider drag jankiness

app/javascript/controllers/divider_controller.js

@@ -2,10 +2,11 @@ import { Controller } from "@hotwired/stimulus"
 
 const MOVE_ITEM_DATA_TYPE = "x-fizzy/move"
 const DIVIDER_ITEM_NODE_NAME = "LI"
+const OVERLAP_THRESHOLD = 0.25
 
 export default class extends Controller {
   static targets = [ "divider", "dragImage", "count" ]
-  static classes = [ "installed" ]
+  static classes = [ "installed", "dragging" ]
   static values = { startCount: Number, maxCount: Number }
 
   connect() {
@@ -22,6 +23,7 @@ export default class extends Controller {
       event.dataTransfer.dropEffect = "move"
       event.dataTransfer.setData(MOVE_ITEM_DATA_TYPE, event.target)
       event.dataTransfer.setDragImage(this.dragImageTarget, 0, 0)
+      this.element.classList.add(this.draggingClass)
     }
   }
 
@@ -31,14 +33,22 @@ export default class extends Controller {
     }
   }
 
-  moveDivider({ target }) {
-    if (target.nodeName == DIVIDER_ITEM_NODE_NAME) {
-      this.#moveDividerTo(this.#items.indexOf(target))
+  moveDivider(event) {
+    if (event.target.nodeName == DIVIDER_ITEM_NODE_NAME) {
+      const rect = this.dividerTarget.getBoundingClientRect()
+      const distanceToTop = Math.abs(event.clientY - rect.top)
+      const distanceToBottom = Math.abs(event.clientY - (rect.top + rect.height))
+      const distanceToNearestEdge = Math.min(distanceToTop, distanceToBottom)
+      const overlap = distanceToNearestEdge / rect.height
+
+      if (overlap > OVERLAP_THRESHOLD) {
+        this.#moveDividerTo(this.#items.indexOf(event.target))
+      }
     }
   }
 
-  persist() {
-    // TODO
+  drop() {
+    this.element.classList.remove(this.draggingClass)
   }
 
   #moveDividerTo(index) {