大屏触摸拖拽事件

首先是三个必要的触摸事件

第一个是：
touchstart

第二个是：
touchmove

第三个是：
touchend

举一个列子吧

    var isdrag = false;
    var tx, x y,ty;      

          document.querySelector("#"+idClass).addEventListener('touchend', function () {
                    isdrag = false;
                });
                document.querySelector("#"+idClass).addEventListener('touchstart', selectmouse);
                document.querySelector("#"+idClass).addEventListener('touchmove', movemouse);

可以看出是 给一个 div绑定了三个事件，有三个函数 是处理的 div的拖拽效果，这个是有个坏处就是：无法指定位置拖拽，如果想看可以看我的博客有详细的介绍的

  function movemouse(e) {
        if (isdrag) {
            console.log("rererer",e)
            var n = tx + e.touches[0].pageX - x;
            var p = ty + e.touches[0].pageY - y;
            var maxL = document.documentElement.clientWidth - document.getElementById(e.path[1].id).offsetWidth
            var maxT = document.documentElement.clientHeight - document.getElementById(e.path[1].id).offsetHeight
            n = n < 0 ? 0 : n
            n = n > maxL ? maxL : n
            p = p < 0 ? 0 : p
            p = p > maxT ? maxT : p
            $("#"+e.path[1].id).css("left", n);
            $("#"+e.path[1].id).css("top", p);
            e.preventDefault();
            return false;
        }
    }
   function selectmouse(e) {
        isdrag = true;
        tx = parseInt(document.getElementById(e.path[1].id).style.left + 0);
        ty = parseInt(document.getElementById(e.path[1].id).style.top + 0);
        x = e.touches[0].pageX;
        y = e.touches[0].pageY;
        return false;
    }

以上是处理拖拽的函数，仅供参考

大致思路是：先获取当前的div 并且绑定相应的事件，给一定的处理函数，在这个里面重新获取位置，并且给这个div 从而达到拖拽的效果,更新拖拽不出去的大的包围圈