js实现在页面内可拖动div（悬浮按钮可拖动改变位置）

需求
这次这个网页是要在手机端浏览的，那么对于返回上一页时不那么友好，于是得在不是首页的地方加上返回首页的悬浮按钮，点击即可返回首页，但在有的页面上这个按钮有时会挡住关键的数据信息，于是想把这个按钮做成悬浮的可以拖动的按钮，以便于看到你想看到的信息。

思路
在触摸开始的时候记录他的坐标，在触摸中记录与开始的差值

代码如下

window.onload = function() {
        var flag = 0; //标记是拖曳还是点击
        var oDiv = document.getElementById('return-index');
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
        oDiv.addEventListener('touchstart', function(e) {
            flag = 0;
            e.preventDefault(); //阻止触摸时页面的滚动，缩放
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            //手指按下时的坐标
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
            //console.log(disX);
        });
        oDiv.addEventListener('touchmove', function(e) {
            flag = 1;
            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY;
            //移动时 当前位置与起始位置之间的差值
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
            //console.log(L);
            if (L < 0) { //限制拖拽的X范围，不能拖出屏幕
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
            if (T < 0) { //限制拖拽的Y范围，不能拖出屏幕
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + 'px';
            moveY = T + 'px';
            //console.log(moveX);
            this.style.right = 0;
            this.style.top = moveY;
        });
        oDiv.addEventListener('touchend', function(e) {
            //alert(parseInt(moveX))
            // 判断滑动方向
            if (flag === 0) { //点击
                openPage('../homepage/homepage.html')
            }
        });
    }

把return-index改成你想要拖动的div的id即可使用（这个只可上下滑动改变位置，如果想左右也可拖动把this.style.right =moveX即可 ;）