import { type Ref, onMounted, onUnmounted } from 'vue'
export default function useDrag(containerRef: Ref<HTMLElement>, contentRef?: Ref<HTMLElement | null>) {
let move = false
let x, y, containerHeight, containerWidth
function mouseDownHandle(e) {
[x, y, containerHeight, containerWidth] = [e.offsetX, e.offsetY, containerRef.value?.offsetHeight, containerRef.value?.offsetWidth]
move = true
document.addEventListener('mousemove', mouseMoveHandle)
document.addEventListener('mouseup', mouseUpHandle)
}
function mouseMoveHandle(e) {
// 剩余留白空间
const restHeight = window.innerHeight - containerHeight
const restWidth = window.innerWidth - containerWidth
// 鼠标位置和盒子边界之间的距离
let div_top = e.clientY - y
let div_left = e.clientX - x
// Math.max(0, div_top)取盒子在视口内的值,如果div_top为负数就取值0 Math.min(Math.max(0, div_top), restHeight)//最大边界不超过restHeight
let containerTop = Math.min(Math.max(0, div_top), restHeight), containerLeft = Math.min(Math.max(0, div_left), restWidth)
if (move) {
containerRef.value!.style.left = containerLeft + 'px'
containerRef.value!.style.top = containerTop + 'px'
}
}
function mouseUpHandle(e) {
move = false
}
onMounted(() => {
containerRef.value?.addEventListener('mousedown', mouseDownHandle)
})
onUnmounted(() => {
containerRef.value?.removeEventListener('mousedown', mouseDownHandle)
document.removeEventListener('mousemove', mouseMoveHandle)
document.removeEventListener('mouseup', mouseUpHandle)
})
}
Vue拖拽hooks简单实现
最新推荐文章于 2024-09-13 14:34:15 发布