弹出层效果(简洁版)

121 阅读1分钟
    let canMove = false
    let x = 0, y = 0
    $('.layer').mousedown(function (e) {
        相对位置
        x = e.pageX - $('.layer').offset().left
        y = e.pageY - $('.layer').offset().top
        canMove = true
    })

    $(window).mouseup(function () {
        canMove = false
    })

    $(window).blur(function () {
        失去焦点时触发
        canMove = false
    })

    $(window).mousemove(function (e) {
        阻止浏览器默认行为
        e.preventDefault()
        if (canMove) {
            限制移动范围
            let left = e.pageX - x
            let top = e.pageY - y

            let maxLeft = $(window).innerWidth() - $('.layer').innerWidth()
            let maxTop = $(window).innerHeight() - $('.layer').innerHeight()

            将初始值进行过滤,得到最终值
            let result = $.filterLeftAndTop(left, top, maxLeft, maxTop)

            $('.layer').css({
                left: result.left,
                top: result.top
            })
        }
    })