From 8877d2e66df96b61b741cd0dd6de1762521d9990 Mon Sep 17 00:00:00 2001 From: Jose Farias Date: Thu, 16 Jan 2025 15:09:46 -0600 Subject: [PATCH] Use distance to nearest edge This feels the smoothest --- app/javascript/controllers/divider_controller.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/divider_controller.js b/app/javascript/controllers/divider_controller.js index 2cec61d8c..553065c30 100644 --- a/app/javascript/controllers/divider_controller.js +++ b/app/javascript/controllers/divider_controller.js @@ -2,6 +2,7 @@ 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" ] @@ -35,9 +36,12 @@ export default class extends Controller { moveDivider(event) { if (event.target.nodeName == DIVIDER_ITEM_NODE_NAME) { const rect = this.dividerTarget.getBoundingClientRect() - const overlap = Math.abs((event.clientY - rect.top) / rect.height) + 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 > 0.5) { + if (overlap > OVERLAP_THRESHOLD) { this.#moveDividerTo(this.#items.indexOf(event.target)) } }