移动端 移动拖拽效果

 #remove{width:55px;height:55px;background:blue;position:absolute;left:10px;top:10px;}
 <div id="remove"></div>
<script>
    window.onload=function(){
        removeTarget("remove");
        function removeTarget(removeId){
            // 获取节点
            var block = document.getElementById(removeId);
            console.log(block)
            var oW,oH;
            // 绑定touchstart事件
            block.addEventListener("touchstart", function(e) {
                var touches = e.touches[0];
                oW = touches.clientX - block.offsetLeft;
                oH = touches.clientY - block.offsetTop;
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove",defaultEvent,false);
            },false);

            block.addEventListener("touchmove", function(e) {
                var touches = e.touches[0];
                var oLeft = touches.clientX - oW;
                var oTop = touches.clientY - oH;
                if(oLeft < 0) {oLeft = 0;
                }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
                    oLeft = (document.documentElement.clientWidth - block.offsetWidth);
                }
                if(oTop<0){
                    oTop=0;
                }else if(oTop > document.documentElement.clientHeight - block.offsetHeight){
                    oTop = (document.documentElement.clientHeight - block.offsetHeight);
                }
                block.style.left = oLeft + "px";
                block.style.top = oTop + "px";

            },false);

            block.addEventListener("touchend",function() {
                document.removeEventListener("touchmove",defaultEvent,false);
            },false);
            function defaultEvent(e) {
                e.preventDefault();
            }

        }
    }
</script>