1 line
6.5 KiB
Plaintext
1 line
6.5 KiB
Plaintext
|
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/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 overflow?: ComputedRef<boolean>\n) => {\n const transform = {\n offsetX: 0,\n offsetY: 0,\n }\n\n const adjustPosition = (moveX: number, moveY: number) => {\n if (targetRef.value) {\n const { offsetX, offsetY } = transform\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 if (!overflow?.value) {\n moveX = Math.min(Math.max(moveX, minLeft), maxLeft)\n moveY = Math.min(Math.max(moveY, minTop), maxTop)\n }\n\n transform.offsetX = moveX\n transform.offsetY = moveY\n\n targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\n moveY\n )})`\n }\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 onMousemove = (e: MouseEvent) => {\n const moveX = offsetX + e.clientX - downX\n const moveY = offsetY + e.clientY - downY\n\n adjustPosition(moveX, 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 window.addEventListener('resize', updatePosition)\n }\n }\n\n const offDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.removeEventListener('mousedown', onMousedown)\n window.removeEventListener('resize', updatePosition)\n }\n }\n\n const resetPosition = () => {\n transform.offsetX = 0\n transform.offsetY = 0\n\n if (targetRef.value) {\n targetRef.value.style.transform = ''\n }\n }\n\n const updatePosition = () => {\n const { offsetX, offsetY } = transform\n\n adjustPosition(offsetX, offsetY)\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 return {\n resetPosition,\n updatePosition,\n }\n}\n"],"names":[],"mappings":";;;AAEY,MAAC,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,KAAK;AACzE,EAAE,MAAM,SAAS,GAAG;AACpB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,OAAO,EAAE,CAAC;AACd,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK;AAC3C,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE;AACzB,MAAM,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC;AACvC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAC/D,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;AACjE,MAAM,MAAM,OAAO,GAAG,CAAC,UAAU,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,MAAM,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;AAC1C,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,
|