element-plus/packages/hooks/use-draggable/index.ts
kooriookami 67cd7e95e6
feat(components): [dialog] Dialog can drag overflow the viewport (#15643)
* style(components): [dialog] Modify dialog style and docs

* chore: update

* feat(components): [dialog] add overflow prop

* feat(components): update
2024-01-25 15:03:34 +08:00

91 lines
2.4 KiB
TypeScript

import { onBeforeUnmount, onMounted, watchEffect } from 'vue'
import { addUnit } from '@element-plus/utils'
import type { ComputedRef, Ref } from 'vue'
export const useDraggable = (
targetRef: Ref<HTMLElement | undefined>,
dragRef: Ref<HTMLElement | undefined>,
draggable: ComputedRef<boolean>,
overflow?: ComputedRef<boolean>
) => {
let transform = {
offsetX: 0,
offsetY: 0,
}
const onMousedown = (e: MouseEvent) => {
const downX = e.clientX
const downY = e.clientY
const { offsetX, offsetY } = transform
const targetRect = targetRef.value!.getBoundingClientRect()
const targetLeft = targetRect.left
const targetTop = targetRect.top
const targetWidth = targetRect.width
const targetHeight = targetRect.height
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
const minLeft = -targetLeft + offsetX
const minTop = -targetTop + offsetY
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX
const maxTop = clientHeight - targetTop - targetHeight + offsetY
const onMousemove = (e: MouseEvent) => {
let moveX = offsetX + e.clientX - downX
let moveY = offsetY + e.clientY - downY
if (!overflow?.value) {
moveX = Math.min(Math.max(moveX, minLeft), maxLeft)
moveY = Math.min(Math.max(moveY, minTop), maxTop)
}
transform = {
offsetX: moveX,
offsetY: moveY,
}
if (targetRef.value) {
targetRef.value.style.transform = `translate(${addUnit(
moveX
)}, ${addUnit(moveY)})`
}
}
const onMouseup = () => {
document.removeEventListener('mousemove', onMousemove)
document.removeEventListener('mouseup', onMouseup)
}
document.addEventListener('mousemove', onMousemove)
document.addEventListener('mouseup', onMouseup)
}
const onDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.addEventListener('mousedown', onMousedown)
}
}
const offDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.removeEventListener('mousedown', onMousedown)
}
}
onMounted(() => {
watchEffect(() => {
if (draggable.value) {
onDraggable()
} else {
offDraggable()
}
})
})
onBeforeUnmount(() => {
offDraggable()
})
}