H5 原生拖拽方法实现 一个函数解决dom拖拽

一个函数，接受两个参数，可以传一个页可以传两个 第一个参数：要拖动的Dom ID， 第二个参数：相对父节点的Dom ID，不传可根据reset动态设置为window 结合 监听touchstart 和 touchMove 事件 获取手势位置 计算拖动距离，并在执行完成后 监听touchend事件移除 touchstart和touchmove的监听。

 dragDom = (dragNode, parentNode, ...rest) => {
 let dragNode = document.getElementById(dragNode);
    if (rest.length == 1) {
        let parentNode = window.self;
        let pWidth = parentNode.innerWidth, pHeight = parentNode.innerHeight;
    } else {
        let parentNode = document.getElementById(parentNode);
        let pWidth = parentNode.clientWidth
        let pHeight = parentNode.clientHeight;
    }
    dragNode.addEventListener('touchstart', (event) => {
        //当只有一个手指时              .
        if (event.touches.length == 1) {
            //禁止浏览器默认事
            event.preventDefault();
        };
        let touch = event.targetTouches[0];
        let disX = touch.clientX - dragNode.offsetLeft, disY = touch.clientY - dragNode.offsetTop;
        let oWidth = dragNode.offsetWidth, oHeight = dragNode.offsetHeight;

        dragNode.addEventListener('touchmove', (event) => {
            let touch = event.targetTouches[0];
            dragNode.style.left = touch.clientX - disX + 'px';
            dragNode.style.top = touch.clientY - disY + 'px'; //这里不建议用setState设置top
            // //左侧
            if (obj.offsetLeft <= 0) {
                obj.style.left = 0;
            };
            // //右侧
            if (obj.offsetLeft >= pWidth - oWidth) {
                obj.style.left = pWidth - oWidth + 'px';
            };
            //上面
            if (obj.offsetTop <= 0) {
                this.setState({
                    top: 0
                })
            };
            // //下面
            if (obj.offsetTop >= pHeight - oHeight) {
                obj.style.top = pHeight - oHeight + 'px';
            };
        });
        dragNode.addEventListener('touchend', function (event) {
            dragNode.removeEventListener('touchmove', () => { });
            dragNode.removeEventListener('touchend', () => { });
        })
    });
}

目前看再移动端表现效果不错，有问题可以留言，在线答疑。