fix: styles causing position to create a wrong transformation

* When adding top / left stylings it creates wrong transformation string
bcakmakoglu · Nov 17, 2021 · 0762c47 · 0762c47
1 parent 3022a63
commit 0762c47
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/example/WrapperBox.vue b/example/WrapperBox.vue
@@ -71,7 +71,8 @@ export default {
 </script>
 <style>
 .wrapper-box {
-  @apply max-w-70 lg:max-w-xs
+  @apply max-w-70
+  lg:max-w-xs
   h-60
   w-xs
   py-4

diff --git a/src/hooks/useDraggable.ts b/src/hooks/useDraggable.ts
@@ -29,10 +29,7 @@ const useDraggable = (target: MaybeRef<any>, options: Partial<DraggableOptions>)
         move: () => {},
         stop: () => {},
         mouseDown: () => {},
-        position: {
-          x: 0,
-          y: 0
-        },
+        position: undefined,
         positionOffset: undefined,
         scale: 1,
         axis: 'both',
@@ -247,11 +244,18 @@ const useDraggable = (target: MaybeRef<any>, options: Partial<DraggableOptions>)
       console.error('You are trying to use <Draggable> without passing a valid target reference.');
       return;
     }
-    const x =
-      (get(state).position ? get(state).position?.x : get(state).defaultPosition.x) || parseInt(get(node).style.top, 10) || 0;
-    const y =
-      (get(state).position ? get(state).position?.x : get(state).defaultPosition.x) || parseInt(get(node).style.left, 10) || 0;
-    get(state).defaultPosition = { x, y };
+    let x = 0;
+    let y = 0;
+    const pos = get(state).position;
+    const defaultPos = get(state).defaultPosition;
+    const stylePos = get(node).style;
+    if (pos && typeof pos.x !== 'undefined') x = pos.x;
+    else if (defaultPos && typeof defaultPos.x !== 'undefined') x = defaultPos.x;
+    else if (stylePos.top) x = parseInt(stylePos.top, 10);
+    if (pos && typeof pos.y !== 'undefined') y = pos.y;
+    else if (defaultPos && typeof defaultPos.y !== 'undefined') y = defaultPos.y;
+    else if (stylePos.left) y = parseInt(stylePos.left, 10);
+
     xPos.value = x;
     yPos.value = y;
     addClasses() && onUpdated();