记录一个：js移动端拖拽控制按钮，可以拖动，吸附边框功能

实现效果是这样的，可以任意拖拽，低于多少px时，就直接吸附在边上。

代码不解释了，自己看。

前端代码

<a class="app-store" id="btnStore" href="https://itunes.apple.com/cn/app/you-shi-yun/id1352836220?l=zh&amp;ls=1&amp;mt=8">
    <div class="app-content">
        <img class="app-img-left" src="/assets/img/common/app_logo.png">
        <img class="app-img-right" src="/assets/img/common/app_start.png">
        <div></div>
    </div>

</a>
<div class="app-right" id="btnHome">
        <a href="/"><img class="app-right-img" src="/assets/img/common/home.png">&nbsp;首页</a>
</div>

js代码

//可拖拽，吸附边框
    var bodyWidth=document.body.clientWidth;
    document.getElementById("btnHome").style.left=bodyWidth-63+"px";
    //getOffsetSum 获取相对与document的偏移量
    function getOffsetSum(ele){
        var top= ele.offsetTop,left=ele.offsetLeft;
        return { top:top, left:left }
    }
    var maindiv=document.getElementById("btnHome");
    maindiv.addEventListener("touchmove",touch,false);

    function touch(e)
    {
        switch(e.type)
        {
            case "touchmove":
                var ele=getOffsetSum(e.target);
                var left=ele.left;
                var top=ele.top;
                var x=e.touches[0].clientX-left/2;
                var y=e.touches[0].clientY-top/2;
                e.preventDefault();

                if (x < 100) {
                    e.target.parentNode.style.left="0";
                }else if (x >300) {
                    e.target.parentNode.style.left=bodyWidth-63+"px";
                }else{
                    e.target.parentNode.style.left=x+"px";
                }
                if (y < 100) {
                    e.target.parentNode.style.top = "30%";
                }else if(y > 500){
                    e.target.parentNode.style.top = "80%";
                }else{
                    e.target.parentNode.style.top = y+"px";
                }
                setCookie('touch_x',e.target.parentNode.style.left);
                setCookie('touch_y',e.target.parentNode.style.top);
        }
    }
    //固定此按钮
    var touch_x = getCookie('touch_x');
    var touch_y = getCookie('touch_y');
    var btnFloat = document.getElementById('btnHome');
    if(touch_x){
        btnFloat.style.left = touch_x;
    }
    if(touch_y){
        btnFloat.style.top = touch_y;
    }

    var username=document.cookie.split(";")[0].split("=")[1];
    //JS操作cookies方法!
    //写cookies
    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/";
    }
    //读cookies
    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }

css代码

.app-store{width:100%;position: fixed;top:0;left:0;right: 0;  text-align: left;  text-transform: none;  z-index: 999999;  -webkit-font-smoothing: subpixel-antialiased;}
.app-content{width:100%;height:50px;background: #ffffff;}
.app-img-left{width:120px;height:40px;margin:5px 10px;float: left}
.app-img-right{width:55px;height:22px;margin:15px 15px;float: right}
.app-content div{clear: both}
.app-right{width:63px;  height:25px;  background:rgba(15,131,254,1);  border-radius:14px;position: fixed;top:80%;  text-align: left;  text-transform: none;  z-index: 999999;  -webkit-font-smoothing: subpixel-antialiased;}
.app-right a{border-radius:14px;background: #0F83FE;border: 0px solid #fff;font-size:12px;font-family:MicrosoftYaHei;  color:rgba(255,255,255,1);  line-height:25px;text-align: center}
.app-right-img{margin-top:-2px;vertical-align:middle;width:12px;height:12px;margin-left:10px;}