fix: properly shuffle around sortables when draghandle is separate div

Author: CallumJHays

package.json

@@ -57,9 +57,9 @@
     "@release-it/keep-a-changelog": "^3.1.0",
     "prettier": "^2.7.1",
     "release-it": "^15.5.0",
+    "solid-js": "^1.5",
     "tsup": "^6.5.0",
     "tsup-preset-solid": "^0.1.4",
-    "solid-js": "^1.5",
     "typescript": "^4.8.4"
   },
   "publishConfig": {
@@ -69,5 +69,8 @@
   "engines": {
     "node": ">=18.0.0",
     "pnpm": ">=8.6.0"
+  },
+  "dependencies": {
+    "example-with-tailwindcss": "link:/Users/chays/code/crochet-kit"
   }
 }

pnpm-lock.yaml

@@ -75,25 +75,31 @@ const createSortable = (id: Id, data: Record<string, any> = {}): Sortable => {
     );
   };
 
+  const linkTransformUpdates = (element: HTMLElement) => {
+    createEffect(() => {
+      const resolvedTransform = transform();
+      if (!transformsAreEqual(resolvedTransform, noopTransform())) {
+        const style = transformStyle(transform());
+        element.style.setProperty("transform", style.transform ?? null);
+      } else {
+        element.style.removeProperty("transform");
+      }
+    });
+  };
+
   const sortable = Object.defineProperties(
     (element: HTMLElement) => {
       draggable(element, () => ({ skipTransform: true }));
       droppable(element, () => ({ skipTransform: true }));
-
-      createEffect(() => {
-        const resolvedTransform = transform();
-        if (!transformsAreEqual(resolvedTransform, noopTransform())) {
-          const style = transformStyle(transform());
-          element.style.setProperty("transform", style.transform ?? null);
-        } else {
-          element.style.removeProperty("transform");
-        }
-      });
+      linkTransformUpdates(element);
     },
     {
       ref: {
         enumerable: true,
-        value: setNode,
+        value: (element: HTMLElement) => {
+          setNode(element);
+          linkTransformUpdates(element);
+        },
       },
       transform: {
         enumerable: true,