实现在h5 | pc 动态插入元素实现拖拽

;(function() {
    const size = 25

// **************************************************************
    const dom = document.createElement('div')

    dom.innerHTML = 'R'

    dom.id = 'freedom_refresh_dom'

    const styles = `
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: ${size}px;
        height: ${size}px;
        background: red;
        color: black;
        border-radius:50%;
        fontsize: 12px;
        z-index: 100000;
        opacity: 0.4;
    `

    dom.style = styles

    function createClick() {
        window.location.reload()
    }

    const parentDom = document.querySelector('html')

    parentDom.appendChild(dom)
// ***************************************************************

    let Xdirection = 1,
        Ydirection = 1,
        borderAll = size,
        moveX = 0,
        moveY = 0,
        xDifference = 0,
        yDifference = 0,
        oldX = null,
        oldY = null,
        el = document.querySelector('#freedom_refresh_dom'),
        // 判断环境 PC | Mobile
        ENV_TYPE_LOCAL = navigator.userAgent.includes('Mobile')

    // 获取屏幕宽|高
    const getWindowViewport = () => {
        var windowHeight = 0
        var windowWidth = 0
        if (document.compatMode === 'CSS1Compat') {
            windowHeight = document.documentElement.clientHeight
            windowWidth = document.documentElement.clientWidth
        } else {
            windowHeight = document.body.clientHeight
            windowWidth = document.body.clientWidth
        }
        return { windowWidth, windowHeight }
    }

    // 初始化获取一次
    const getWindowViewportVal = getWindowViewport()

    // 位置赋值方法
    const moveEle = (params) => {
        let { moveX = 0, moveY = 0 } = params
        if (!Xdirection) {
            moveX = 0
        }
        if (!Ydirection) {
            moveY = 0
        }
        if (!Xdirection && !Ydirection) {
            console.log(
                `%c 元素设置 (X轴==${moveX},Y轴==${moveY}) 不能移动！！！`,
                `background: red; color: #FFF; padding: 4px`
            )
        }
        if (el) {
            el.style.transform = `translate(${moveX}px, ${moveY}px )`
        }
    }

    const touchStart = (event) => {
        event.preventDefault()
        event.stopPropagation()

        // 手指按下时的手指所在的X，Y坐标
        const { clientX: pageX, clientY: pageY } = event.targetTouches?.[0] || event

        xDifference = parseInt(pageX, 10) - parseInt(moveX + '', 10)
        yDifference = parseInt(pageY, 10) - parseInt(moveY + '', 10)

        if (!ENV_TYPE_LOCAL) {
            dom.addEventListener('mousemove', touchMove)
        }
    }
    const touchEnd = (event) => {
        event.preventDefault()
        event.stopPropagation()

        if (!ENV_TYPE_LOCAL) {
            dom.removeEventListener('mousemove', touchMove)
        }

        // 判断事件是点击还是拖拽
        if (oldX === moveX && oldY === moveY) {
            createClick()
        }
        // 记录当前释放位置
        oldX = moveX
        oldY = moveY
    }

    const touchMove = (event) => {
        event.preventDefault()
        event.stopPropagation()
        if (el) {
            const { clientX: pageX, clientY: pageY } =
                event.targetTouches?.[0] || event
            window.console.log(`${pageX} ${pageY} ${xDifference} ${yDifference}`)
            moveX = pageX - xDifference
            moveY = pageY - yDifference

            if (pageX < 0) {
                moveX = 0
            }
            if (pageY < 0) {
                moveY = 0
            }

            if (getWindowViewportVal.windowWidth - borderAll < pageX) {
                moveX = getWindowViewportVal.windowWidth - borderAll
            }

            if (getWindowViewportVal.windowHeight - borderAll < pageY) {
                moveY = getWindowViewportVal.windowHeight - borderAll
            }

            // window.console.log(`${moveX} ${moveY}`)
              
            // 调用方法更新实时位置
            moveEle({ moveX, moveY })
        }
    }

    if (ENV_TYPE_LOCAL) {
        el.removeEventListener('touchmove', touchMove)
        el.removeEventListener('touchend', touchEnd)
        el.removeEventListener('touchstart', touchStart)
    } else {
        el.removeEventListener('mouseup', touchEnd)
        el.removeEventListener('mousedown', touchStart)
        el.removeEventListener('mousemove', touchMove)
    }
    if (ENV_TYPE_LOCAL) {
        el.addEventListener('touchmove', touchMove)
        el.addEventListener('touchend', touchEnd)
        el.addEventListener('touchstart', touchStart)
    } else {
        el.addEventListener('mouseup', touchEnd)
        el.addEventListener('mousedown', touchStart)
        // dom.addEventListener('mousemove', touchMove)
    }
})()