add draggify module
This commit is contained in:
riqo
parent
90f331f933
commit
a4ff3a36b9
2 changed files with 139 additions and 97 deletions
|
|
@ -1,115 +1,26 @@
|
|||
<template>
|
||||
<div id=inputItem
|
||||
class="input-item playing"
|
||||
:style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
|
||||
<span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="play"></span>
|
||||
<span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="pause"></span>
|
||||
:style="{ top: `${elementY}px`, left: `${elementX}px` }">
|
||||
<span class="play"></span>
|
||||
<span class="pause"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, onMounted, ref, onUnmounted } from "vue";
|
||||
import { calcSideProximity, calcPosition } from "./helpers"
|
||||
import { defineComponent } from "vue";
|
||||
import draggify from '@/modules/draggify';
|
||||
|
||||
export default defineComponent({
|
||||
name: "InputItem",
|
||||
setup() {
|
||||
|
||||
let element: HTMLElement | null;
|
||||
|
||||
// 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);
|
||||
})
|
||||
const { elementX, elementY } = draggify({ elementId: 'inputItem'})
|
||||
|
||||
return {
|
||||
inputItemX,
|
||||
inputItemY
|
||||
elementX,
|
||||
elementY
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
131
src/modules/draggify.ts
Normal file
131
src/modules/draggify.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue