131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
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 = 20;
|
|
elementY.value = 200 - 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
|
|
}
|
|
|
|
}
|