js 实现浮层

今日有一个需求，需要做出来一个像苹果手机的悬浮按钮一样的层，有点击事件，
在当点击拖拽的时候去掉背景色，松开拖拽的时候靠边贴上去，
<style>
            .fuceng{
                position: fixed;
                top: 1rem;
                right: 0rem;
                 1.45rem;
                height: 1.3rem;
                background: rgba(234,233,238,0.7);
                border: 2px solid #f3f1f4;
                z-index: 10;
                box-shadow: 3px 3px 3px rgba(234,233,238,0.4) ;
                border-radius: 0.8rem 0 0 0.8rem;
            }
            .fuceng img{
                padding: 0.1rem;
                 1.1rem;
                height: 1.1rem;
            }
        </style>
    </head>
    <body>
        <div class="fuceng" id="fuceng">
            <img src="img/fuceng.png" />
        </div>
        <script>
            move();
            function move(){
                var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
                //按下
                document.getElementById("fuceng").addEventListener("touchstart", function (e) {
                    _x_start = e.touches[0].pageX; //起始点击位置
                    _y_start = e.touches[0].pageY; //起始点击位置
                    left_start = $("#fuceng").css("left"); //元素左边距
                    top_start = $("#fuceng").css("top"); //元素上边距
                    $(".fuceng").css({"background":"initial","border":'none'});
                });
                //移动
                document.getElementById("fuceng").addEventListener("touchmove", function (e) {
                    e.preventDefault(); //取消事件的默认动作。
                    _x_move = e.touches[0].pageX; //当前屏幕上所有触摸点的集合列表
                    _y_move = e.touches[0].pageY; //当前屏幕上所有触摸点的集合列表
                    //左边距=当前触摸点-鼠标起始点击位置+起始左边距
                    $("#fuceng").css("left", parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(
                        left_start) + "px");
                    //上边距=当前触摸点-鼠标起始点击位置+起始上边距
                    $("#fuceng").css("top", parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start) +
                        "px");
                });
                //松开
                document.getElementById("fuceng").addEventListener("touchend", function (e) {
                    // var bodyW = $("body").width() / 2; //屏幕宽的一半
                    // var bodyH = $("body").height(); //屏幕高
                    var bodyW = $(window).width() / 2; //屏幕宽的一半
                    var bodyH = $(window).height(); //屏幕高
                    var _x_end = e.changedTouches[0].pageX; //松开位置
                    var _y_end = e.changedTouches[0].pageY; //松开位置
                    var divH = $("#fuceng").height(); //元素高
                    var divW = $("#fuceng").width(); //元素宽
                    //当最终位置在屏幕左半部分
                    if (_x_end < bodyW) {
                        $("#fuceng").css("left", "0px");
                        $(".fuceng").css({"background":"rgba(234,233,238,0.7)","border":'2px solid #f3f1f4',"borderRadius":'0 0.8rem 0.8rem 0'});
                        $(".fuceng img").css("float","right")
                    } else if (_x_end >= bodyW) { //当最终位置在屏幕左半部分
                        $("#fuceng").css("left", $(window).width() - parseFloat(divW))
                        $(".fuceng").css({"background":"rgba(234,233,238,0.7)","border":'2px solid #f3f1f4',"borderRadius":'0.8rem 0 0 0.8rem '});
                        $(".fuceng img").css("float","left")
                    }
                    //当元素顶部在屏幕外时
                    if (parseFloat($("#fuceng").css("top")) < 0) {
                        //置于顶部
                        $("#fuceng").css("top", 0); //置于顶部
                    }
                    //当元素底部在屏幕外时
                    if (parseFloat($("#fuceng").css("bottom")) < 0) {
                        //置于底部
                        $("#fuceng").css("top", bodyH - parseFloat(divH)); //置于底部
                    }
                });
                $("#fuceng").click(function () {
                    // 浮层点击事件
                });
            }
        </script>
如下图：