@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
1 lines • 4.9 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, watchEffect } from 'vue'\nimport { addUnit } from '@vuesax-alpha/utils'\nimport type { ComputedRef, Ref } from 'vue'\n\nexport const useDraggable = (\n targetRef: Ref<HTMLElement | undefined>,\n dragRef: Ref<HTMLElement | undefined>,\n draggable: ComputedRef<boolean>\n) => {\n let transform = {\n offsetX: 0,\n offsetY: 0,\n }\n\n const onMousedown = (e: MouseEvent) => {\n const downX = e.clientX\n const downY = e.clientY\n const { offsetX, offsetY } = transform\n\n const targetRect = targetRef.value!.getBoundingClientRect()\n const targetLeft = targetRect.left\n const targetTop = targetRect.top\n const targetWidth = targetRect.width\n const targetHeight = targetRect.height\n\n const clientWidth = document.documentElement.clientWidth\n const clientHeight = document.documentElement.clientHeight\n\n const minLeft = -targetLeft + offsetX\n const minTop = -targetTop + offsetY\n const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\n const maxTop = clientHeight - targetTop - targetHeight + offsetY\n\n const onMousemove = (e: MouseEvent) => {\n const moveX = Math.min(\n Math.max(offsetX + e.clientX - downX, minLeft),\n maxLeft\n )\n const moveY = Math.min(\n Math.max(offsetY + e.clientY - downY, minTop),\n maxTop\n )\n\n transform = {\n offsetX: moveX,\n offsetY: moveY,\n }\n targetRef.value!.style.transform = `translate(${addUnit(\n moveX\n )}, ${addUnit(moveY)})`\n }\n\n const onMouseup = () => {\n document.removeEventListener('mousemove', onMousemove)\n document.removeEventListener('mouseup', onMouseup)\n }\n\n document.addEventListener('mousemove', onMousemove)\n document.addEventListener('mouseup', onMouseup)\n }\n\n const onDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.addEventListener('mousedown', onMousedown)\n }\n }\n\n const offDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.removeEventListener('mousedown', onMousedown)\n }\n }\n\n onMounted(() => {\n watchEffect(() => {\n if (draggable.value) {\n onDraggable()\n } else {\n offDraggable()\n }\n })\n })\n\n onBeforeUnmount(() => {\n offDraggable()\n })\n}\n"],"names":["e"],"mappings":"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"}