拖拽函数

53 阅读1分钟

/*
* vue2 + ts
* oDrag 拖拽主体 
* handle 触发拖拽的主体
*/
    drag(oDrag: HTMLDivElement, handle: HTMLDivElement) {
        let disX: number = 0,
            disY: number = 0
        handle = handle || oDrag
        handle.style.cursor = "move"
        handle.onmousedown = function (event: any){
            event = event || window.event
            disX = event.clientX - oDrag.offsetLeft
            disY = event.clientY - oDrag.offsetTop
            let w = document.documentElement.clientWidth;
            let h = document.documentElement.clientHeight;
            document.onmousemove = function (event: any){
                event = event || window.event
                let iL: number = event.clientX - disX,
                    iT: number = event.clientY - disY,
                    maxL: number = w - oDrag.offsetWidth,
                    maxT: number = h - oDrag.offsetHeight
                iL <= 0 && (iL = 0)
                iT <= 0 && (iT = 0)
                iL >= maxL && (iL = maxL)
                iT >= maxT && (iT = maxT)
                oDrag.style.left = iL + "px"
                oDrag.style.top = iT + "px"
                return false
            }
            document.onmouseup = function (){
                document.onmousemove = null
                document.onmouseup = null
                handle.releaseCapture && handle.releaseCapture()
            }
            handle.setCapture && handle.setCapture()
            return false
        }
    }