移动端自由移动元素位置

HTML部分

        <div class="a1 aa" id="img0"><img src="images/a1.png"></div>
        <div class="a2 aa" id="img1"><img src="images/a2.png"></div>
        <div class="a3 aa" id="img2"><img src="images/a3.png"></div>

    <style>
        *{border: 0;margin:0;padding: 0;}
        body{max-width: 720px;width: 100%;height: 100%;position: absolute;}
        img{width: 100%;}
        .aa{width: 30%;left: 35%;position: absolute;}
        .a1{top: 10%;}
        .a2{top: 30%;}
        .a3{top: 50%;}
    </style>

JS

    var block;
    for(var i = 0;i<3;i++){
        Aaron(i);
    }
    function Aaron(i){
        var block = document.getElementById("img" + i);
        var oW,
            oH;
        //绑定touchstart事件
        block.addEventListener("touchstart", function(e) {
        var touches = e.touches[0];//touches当前跟踪的触摸操作的Touch对象的数组
        console.log(touches);
        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);
            }
            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();
        }
    }

注释部分

1、触摸事件：

touchstart 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchmove 当手指在屏幕上滑动时候连续触发，可以用preventDefault阻止
touchend 当手指从屏幕上移开时候触发
touchcancle 当系统停止跟踪触摸时候触发

2、属性：

每一个触摸事件的event对象常见属性：

bubbles
cancelable
view
clientX
clientY
screenX
screenY
detail
altKey
shiftKey
ctrlKey
metaKey
还包含3个用于跟踪触摸的属性：

touches 当前跟踪的触摸操作的Touch对象的数组
targetTouchs 特定于事件目标的Touch对象的数组
changeTouches 自上次触摸以来发生了什么改变的Touch对象的数组
每一个Touch对象包含下列属性：

clientX触摸目标在视口中的x坐标
clientY触摸目标在视口中的y坐标
pageX触摸目标在页面中的x坐标
pageY触摸目标在页面中的y坐标
screenX触摸目标在屏幕中的x坐标
screenY触摸目标在屏幕中的y坐标
target触摸的DOM节点目标
identifier标识触摸的唯一ID
触摸事件的顺序：

touchstart
mouseover
mouseover(一次)
mousedown
mouseup
click
touchend

浏览器支持：

iOS Safari
Android版Webkit
LG专有的OS中的Phantom