element-plus
Version:
A Component Library for Vue 3
1 lines • 6.67 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils'\n\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 isDragging = ref(false)\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 =\n clientHeight -\n targetTop -\n (targetHeight < clientHeight ? targetHeight : 0) +\n 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 if (!isDragging.value) {\n isDragging.value = true\n }\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 isDragging.value = false\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 isDragging,\n resetPosition,\n updatePosition,\n }\n}\n"],"names":["e"],"mappings":"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"}