js仿苹果手机屏幕可拖动图标AssistiveTouch

$(document).ready(function () {
            var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
            //按下
            document.getElementById("id").addEventListener("touchstart", function (e) {
                _x_start = e.touches[0].pageX; //起始点击位置
                _y_start = e.touches[0].pageY; //起始点击位置
                left_start = $("#id").css("left"); //元素左边距
                top_start = $("#id").css("top"); //元素上边距
            });
            //移动
            document.getElementById("id").addEventListener("touchmove", function (e) {
                e.preventDefault(); //取消事件的默认动作。
                _x_move = e.touches[0].pageX; //当前屏幕上所有触摸点的集合列表
                _y_move = e.touches[0].pageY; //当前屏幕上所有触摸点的集合列表
                //左边距=当前触摸点-鼠标起始点击位置+起始左边距
                $("#id").css("left", parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(
                    left_start) + "px");
                //上边距=当前触摸点-鼠标起始点击位置+起始上边距
                $("#id").css("top", parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start) +
                    "px");
            });
            //松开
            document.getElementById("id").addEventListener("touchend", function (e) {

                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 = $("#id").height(); //元素高
                var divW = $("#id").width(); //元素宽
                //当最终位置在屏幕左半部分
                if (_x_end < bodyW) {
                    $("#id").css("left", "0px");
                } else if (_x_end >= bodyW) { //当最终位置在屏幕左半部分
                    $("#id").css("left", $(window).width() - parseFloat(divW))
                }
                //当元素顶部在屏幕外时
                if (parseFloat($("#id").css("top")) < 0) {
                    //置于顶部
                    $("#id").css("top", 0); //置于顶部
                }
                //当元素底部在屏幕外时
                if (bodyH - _y_end < parseFloat(divH) / 2) {
                    //置于底部
                    $("#id").css("top", bodyH - parseFloat(divH))
                }
            });
            $("#id").click(function () {
                console.log('点击');
            });
        })
    </script>