Fix issue with sortable handle

wilgaboury · Oct 17, 2024 · ee899d7 · ee899d7
1 parent 4ca4fa8
commit ee899d7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/dev/Grid.tsx b/dev/Grid.tsx
@@ -6,8 +6,11 @@ import {
   defaultMutationEventListeners,
   Sortable,
   SortableGroupContext,
+  sortableHandle,
 } from "../src";
 
+sortableHandle;
+
 export function randomColor() {
   var letters = "0123456789ABCDEF";
   var color = "#";
@@ -87,6 +90,7 @@ export const GridPage: Component = () => {
               <div
                 draggable={false}
                 style={{
+                  position: "relative",
                   height: "100px",
                   "background-color": color,
                   color: "black",
@@ -96,6 +100,30 @@ export const GridPage: Component = () => {
                 }}
               >
                 {item}
+                <div
+                  use:sortableHandle
+                  style={{
+                    position: "absolute",
+                    height: "15px",
+                    width: "15px",
+                    top: "25px",
+                    left: "25px",
+                    "background-color": "black",
+                    cursor: "grab",
+                  }}
+                />
+                <div
+                  use:sortableHandle
+                  style={{
+                    position: "absolute",
+                    height: "15px",
+                    width: "15px",
+                    top: "50px",
+                    left: "50px",
+                    "background-color": "black",
+                    cursor: "grab",
+                  }}
+                />
               </div>
             );
           }}

diff --git a/src/Sortable.tsx b/src/Sortable.tsx
@@ -76,8 +76,10 @@ export function sortableHandle(el: Element, _accessor: () => any) {
   }
 }
 
-function calculateRelativePercentPosition(e: MouseEvent): Position {
-  const target = e.currentTarget as HTMLElement;
+function calculateRelativePercentPosition(
+  e: MouseEvent,
+  target: HTMLElement,
+): Position {
   const clientRect = elemClientRect(target);
   const relativeMousePos = clientToRelative({ x: e.x, y: e.y }, target);
   return {
@@ -98,8 +100,10 @@ function handleDrag<T>(
   let cleanupGlobalCursorGrabbingStyle: (() => void) | undefined;
   const getItemRef = () => sortable().itemEntries.get(item)!.state.ref();
 
-  const relativeMouseDownPercentPosition =
-    calculateRelativePercentPosition(initialMouseEvent);
+  const relativeMouseDownPercentPosition = calculateRelativePercentPosition(
+    initialMouseEvent,
+    getItemRef(),
+  );
 
   const startSortable = sortable;
   const startIdx = sortable().itemEntries.get(item)!.idx();