add draggify module

src/components/inputItem.vue

@@ -1,115 +1,26 @@
 <template>
   <div id=inputItem
     class="input-item playing"
-    :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }">
-    <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="play"></span>
+    <span class="play"></span>
-    <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="pause"></span>
+    <span class="pause"></span>
   </div>
 </template>
 
 <script lang="ts">
 
-import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+import { defineComponent } from "vue";
-import { calcSideProximity, calcPosition } from "./helpers"
+import draggify from '@/modules/draggify';
 
 export default defineComponent({
   name: "InputItem",
   setup() {
 
-    let element: HTMLElement | null;
+    const { elementX, elementY } = draggify({ elementId: 'inputItem'})
-
-    // Cords of inputItem.
-    const inputItemX = ref(0);
-    const inputItemY = ref(0);
-
-    // Position of inputItem on terms of percentage of window.
-    let percentX: number;
-    let percentY: number;
-
-    // How close inputItem is to closest X or Y side.
-    let xShort: number;
-    let yShort: number;
-
-    //---Event Handlers-----------------------------------------------
-
-    // Update the position of inputItem on mouse dragging.
-    const onMouseMove = (e: any) => {
-      element = document.getElementById('inputItem');
-
-      if (element) {
-        const inputItemRect = element.getBoundingClientRect();
-        inputItemX.value = inputItemRect.left + e.movementX;
-        inputItemY.value = inputItemRect.top + e.movementY;
-      }
-
-    }
-
-    // Add an event listener for dragging.
-    const onMouseDown = (_e: any) => {
-      window.addEventListener('mousemove', onMouseMove, true);
-    }
-
-    // Update position references when user is done moving inputItem.
-    const onMouseUp = (_e: any) => {
-      window.removeEventListener('mousemove', onMouseMove, true);
-
-      const winW = window.innerWidth;
-      const winH = window.innerHeight;
-
-      xShort = calcSideProximity(inputItemX.value, winW);
-      yShort = calcSideProximity(inputItemY.value, winH);
-
-      percentX = inputItemX.value / winW;
-      percentY = inputItemY.value / winH;
-
-    }
-
-    // Update position of inputItem on windowResize.
-    const onWindowResize = (_e: any) => {
-      const winW = window.innerWidth;
-      const winH = window.innerHeight;
-
-      inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW);
-      inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH);
-
-    }
-
-    //---------------------------------------------------------------
-
-    onMounted(() => {
-      element = document.getElementById('inputItem');
-
-      if (element) {
-        element.addEventListener('mousedown', onMouseDown, false);
-      }
-
-      window.addEventListener("mouseup", onMouseUp, false);
-
-      // Initialize the positional references.
-      percentX = inputItemX.value / window.innerWidth;
-      percentY = inputItemY.value / window.innerHeight;
-
-      xShort = calcSideProximity(inputItemX.value, window.innerWidth);
-      yShort = calcSideProximity(inputItemX.value, window.innerHeight);
-
-      // Then, we can listen for window resize.
-      window.addEventListener('resize', onWindowResize, false);
-    });
-
-    // Initialize the coordinants.
-    inputItemX.value = 600 - 38 - 20;
-    inputItemY.value = 500 - 38 - 20;
-
-    // remove event listeners
-    onUnmounted(() => {
-        window.removeEventListener('resize', onWindowResize);
-        window.removeEventListener('mouseup', onMouseUp);
-        if (element) element.removeEventListener('mousedown', onMouseDown);
-    })
 
     return {
-      inputItemX,
+      elementX,
-      inputItemY
+      elementY
     }
   }
 

src/modules/draggify.ts

@@ -0,0 +1,131 @@
+import { onMounted, ref, onUnmounted } from "vue";
+
+//---Dragabble Helper Funcs--------------------------------------
+
+// Update xShort or yShort value.
+function calcSideProximity (elementX: number, winW: number) {
+    let short = winW - elementX
+
+    if (short > winW / 2) {
+        short = elementX
+    }
+
+    return short
+}
+
+// Update elementX or elementY value.
+function calcPosition (elementPosition: number, percent: number,
+    short: number, win: number) {
+
+    // Is it close to the right/left side?
+    if (percent > 0.75) {
+        elementPosition = win - short
+    }
+
+    // Is it not close to a side?
+    if (percent < 0.75 && percent > 0.25) {
+        elementPosition = win * percent
+    }
+
+    return elementPosition
+}
+
+export default function draggify(input: { elementId: string }) {
+
+    let element: HTMLElement | null;
+
+    // Cords of inputItem.
+    const elementX = ref(0);
+    const elementY = ref(0);
+
+    // Position of inputItem on terms of percentage of window.
+    let percentX: number;
+    let percentY: number;
+
+    // How close inputItem is to closest X or Y side.
+    let xShort: number;
+    let yShort: number;
+
+    //---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;
+      }
+
+    }
+
+    // Add an event listener for dragging.
+    const onMouseDown = (_e: any) => {
+      window.addEventListener('mousemove', onMouseMove, true);
+    }
+
+    // Update position references when user is done moving targetEl.
+    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);
+
+      percentX = elementX.value / winW;
+      percentY = elementY.value / winH;
+
+    }
+
+    // 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);
+
+    }
+
+    //---------------------------------------------------------------
+
+    onMounted(() => {
+      element = document.getElementById(input.elementId);
+
+      if (element) {
+        element.addEventListener('mousedown', onMouseDown, false);
+      }
+
+      window.addEventListener("mouseup", onMouseUp, false);
+
+      // Initialize the positional references.
+      percentX = elementX.value / window.innerWidth;
+      percentY = elementY.value / window.innerHeight;
+
+      xShort = calcSideProximity(elementX.value, window.innerWidth);
+      yShort = calcSideProximity(elementX.value, window.innerHeight);
+
+      // Then, we can listen for window resize.
+      window.addEventListener('resize', onWindowResize, false);
+    });
+
+    // Initialize the coordinants.
+    elementX.value = 600 - 38 - 20;
+    elementY.value = 500 - 38 - 20;
+
+    // remove event listeners on component dismount.
+    onUnmounted(() => {
+        window.removeEventListener('resize', onWindowResize);
+        window.removeEventListener('mouseup', onMouseUp);
+        if (element) element.removeEventListener('mousedown', onMouseDown);
+    })
+
+    return {
+      elementX,
+      elementY
+    }
+
+}