new dragging code

src/components/inputItem/inputItem.vue

@@ -48,10 +48,7 @@ export default defineComponent({
     const yStart = window.innerHeight - 200;
 
     // Calculate position of inputItem on drag.
-    const { elementX, elementY } = draggify(
-      { elementId: "inputItem" }, 
-      { x: xStart, y: yStart }
-    );
+    const { elementX, elementY } = draggify("inputItem", xStart, yStart);
 
     // Controllers for text and audio.
     const { typing } = useTextInputController(elementX)
@@ -97,7 +94,7 @@ export default defineComponent({
   z-index: 3;
 
   // border: 4px solid #C6C6C6;
-  border-radius: 20px;
+  border-radius: 50%;
 
   // Set opacity here to not affect child.
   background-color: rgba(235, 235, 235, 0.75);

src/modules/draggify.ts

@@ -2,19 +2,74 @@ import { onMounted, ref, onUnmounted } from "vue";
 
 //---Dragabble Helper Funcs--------------------------------------
 
-// Update xShort or yShort value.
+// Calculate distance to nearest side.
+// Could be enhanced to take into account side.
+
+
 function calcSideProximity (elementX: number, winW: number) {
-    let short = winW - elementX
 
-    if (short > winW / 2) {
-        short = elementX
-    }
+  // Calc right short.
+  let short = winW - elementX - 40;
 
-    return short
+  // See if it's left short.
+  if (elementX + 20 < winW / 2) {
+    short = elementX
+  }
+
+  return short
 }
 
-// Update elementX or elementY value.
-function calcPosition (elementPosition: number, percent: number,
+
+function calcPositionXDrag (elementId: string, short: number, mouse: number) {
+    let elementPosition = 0;
+    const element = document.getElementById(elementId);
+
+    if (element) {
+
+      const elementRect = element.getBoundingClientRect();
+
+      // If we are close to a side...
+      if (short <= 15) {
+
+        elementPosition = elementRect.left // no change
+
+      } else {
+
+        elementPosition = elementRect.left + mouse;
+
+      }
+
+      console.log(`leftSide: ${elementRect.left}`)
+
+    }
+
+    return elementPosition;
+}
+
+function calcPositionYDrag (elementId: string, short: number, mouse: number) {
+    let elementPosition = 0;
+    const element = document.getElementById(elementId);
+
+    if (element) {
+
+      const elementRect = element.getBoundingClientRect();
+
+      if (short <= 15 && !xTouch) {
+
+        elementPosition = elementRect.top // no change
+        xTouch = true
+
+      } else {
+        elementPosition = elementRect.top + mouse;
+      }
+
+    }
+
+    return elementPosition;
+}
+
+// Update elementX or elementY value on window resize.
+function calcPositionResize (elementPosition: number, percent: number,
     short: number, win: number) {
 
     // Is it close to the right/left side?
@@ -30,7 +85,8 @@ function calcPosition (elementPosition: number, percent: number,
     return elementPosition
 }
 
-export default function draggify(input: { elementId: string }, initPosition: { x: number; y: number}) {
+export default function draggify(elementId: string, xStart: number, 
+  yStart: number) {
 
     let element: HTMLElement | null;
 
@@ -38,6 +94,10 @@ export default function draggify(input: { elementId: string }, initPosition: { x
     const elementX = ref(0);
     const elementY = ref(0);
 
+    // Is inputItem touching the side?
+    let xTouch = true;
+    let yTouch = false;
+
     // Position of inputItem on terms of percentage of window.
     let percentX: number;
     let percentY: number;
@@ -46,17 +106,21 @@ export default function draggify(input: { elementId: string }, initPosition: { x
     let xShort: number;
     let yShort: number;
 
+    // Keep track of window size;
+    let winW = window.innerWidth;
+    let winH = window.innerHeight;
+
     //---Event Handlers-----------------------------------------------
 
     // Update the position of inputItem on mouse dragging.
     const onMouseMove = (e: any) => {
-      element = document.getElementById(input.elementId);
 
-      if (element) {
-        const inputItemRect = element.getBoundingClientRect();
-        elementX.value = inputItemRect.left + e.movementX;
-        elementY.value = inputItemRect.top + e.movementY;
-      }
+        xShort = calcSideProximity(elementX.value, winW);
+        yShort = calcSideProximity(elementY.value, winH);
+
+
+        elementX.value = calcPositionXDrag(elementId, xShort, e.movementX)
+        elementY.value = calcPositionYDrag(elementId, yShort, e.movementY)
 
     }
 
@@ -69,12 +133,9 @@ export default function draggify(input: { elementId: string }, initPosition: { x
     const onMouseUp = (_e: any) => {
       window.removeEventListener('mousemove', onMouseMove, true);
 
-      const winW = window.innerWidth;
-      const winH = window.innerHeight;
-
-      xShort = calcSideProximity(elementX.value, winW);
-      yShort = calcSideProximity(elementY.value, winH);
+      // Reposition of outside window.
 
+      // Update percentages.
       percentX = elementX.value / winW;
       percentY = elementY.value / winH;
 
@@ -82,18 +143,21 @@ export default function draggify(input: { elementId: string }, initPosition: { x
 
     // Update position of targetEl on windowResize.
     const onWindowResize = (_e: any) => {
-      const winW = window.innerWidth;
-      const winH = window.innerHeight;
 
-      elementX.value = calcPosition(elementX.value, percentX, xShort, winW);
-      elementY.value = calcPosition(elementY.value, percentY, yShort, winH);
+      // Update window dimensions.
+      winW = window.innerWidth;
+      winH = window.innerHeight;
+
+      elementX.value = calcPositionResize(elementX.value, percentX, xShort, winW);
+
+      elementY.value = calcPositionResize(elementY.value, percentY, yShort, winH);
 
     }
 
     //---------------------------------------------------------------
 
     onMounted(() => {
-      element = document.getElementById(input.elementId);
+      element = document.getElementById(elementId);
 
       if (element) {
         element.addEventListener('mousedown', onMouseDown, false);
@@ -113,8 +177,8 @@ export default function draggify(input: { elementId: string }, initPosition: { x
     });
 
     // Initialize the coordinants.
-    elementX.value = initPosition.x;
-    elementY.value = initPosition.y;
+    elementX.value = xStart;
+    elementY.value = yStart;
 
     // remove event listeners on component dismount.
     onUnmounted(() => {