用touch 做缩放、拖拽，把页面脱出屏幕了怎解

xiaowenwu

请问怎么设置边界代码如下：
touchMove : function(id){
  
    var reqAnimationFrame = (function () {
            return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();
   
        var el = document.querySelector("#" + id);
   
        var START_X = 0;
        var START_Y = 0;
   
        var ticking = false;
        var transform;   //图像效果
        var timer;
            var initAngle = 0;  //旋转角度
            var initScale = 1;  //放大倍数
            var currentScale;
   
        this.mc = new Hammer.Manager(el);   //用管理器  可以同时触发旋转 拖拽  移动
            //var mc = new Hammer(el);              //旋转和移动互斥
            var mc = this.mc;
            /**
                    ev.srcEvent.type  touchstart  touchend touchmove
                    ev.deltaX  手势移动位移变量  
            */
            mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));  
            mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
            //结束时做一些处理
        mc.on("hammer.input", function(ev) {
            if(ev.isFinal) {
                            console.log(START_X + "  " + transform.translate.x + "   " + ev.deltaX + "  " + ev.deltaY);
                            START_X = transform.translate.x ;
                            START_Y = transform.translate.y ;
            }
                    
        });
        
        mc.on("panstart panmove", onPan);
        //mc.on("rotatestart rotatemove rotateend", onRotate);//旋转
        mc.on("pinchstart pinchmove", onPinch);
        
            /**
                    第二次进入拖拽时  delta位移重置
                    移动时 初始位置startxy不动。delta增加
            */
            function onPan(ev){
                    if(!ev.isFinal) {
                            el.className = '';
                            console.log(START_X + "  " + START_Y + " |  " + ev.deltaX + "  " + ev.deltaY);
                            transform.translate = {
                                    x: START_X + ev.deltaX,
                                    y: START_Y + ev.deltaY
                            };
                            requestElementUpdate();
                    }           
            }
            
            function onPinch(ev){
                    if(ev.type == 'pinchstart') {
                            initScale = transform.scale || 1;
                    }
                    el.className = '';
                    transform.scale = initScale * ev.scale;
                    
                    /** 设置最大倍数为2，最小倍数为1 **/
                    currentScale = ev.scale - 1;
        currentScale = initScale + currentScale;
        currentScale = currentScale > 4 ? 4 : currentScale;
        currentScale = currentScale < 1 ? 1 : currentScale;
        currentScale = currentScale < 1 ? 1 : currentScale;
                    transform.scale = currentScale;
                    
                    requestElementUpdate();        
            }
   
            /** 旋转相关 **/
            var preAngle = 0 ;
            var tempAngleFlag =0;
            var deltaAngle = 0;        
            var startRotateAngle = 0;
            
            function onRotate(ev) {
                    //点下第二个触控点时触发
            if(ev.type == 'rotatestart') {                           
                            startRotateAngle =  ev.rotation ;                        
                            tempAngleFlag = 0 ;
            }        
                    if(ev.type == 'rotatemove'){
                            if(tempAngleFlag == 0){
                                    preAngle = startRotateAngle;
                                    tempAngleFlag ++;
                            }else{                                
                                    deltaAngle = ev.rotation - preAngle;
                                    el.className = '';
                                    transform.rz = 1;  //非0  垂直xy轴
                                    transform.angle = initAngle + deltaAngle;                                                                        
                                    requestElementUpdate();        
                            }
                    }
                           
                    //旋转结束  记录当前图片角度        
                    if(ev.type =='rotateend'){
                            initAngle = transform.angle;
                    }        
        }
   
        function updateElementTransform() {
            var value = [
            'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
            'scale(' + transform.scale + ', ' + transform.scale + ')',
            'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +',' + transform.angle + 'deg)'
            ];
   
            value = value.join(" ");
            el.style.webkitTransform = value;
            el.style.mozTransform = value;
            el.style.transform = value;
            ticking = false;
        }
   
        function requestElementUpdate() {
            if(!ticking) {
                reqAnimationFrame(updateElementTransform);
                ticking = true;
            }
        }
   
        function logEvent(str) {
        }
            
            /**
                    初始化设置
            */
        function resetElement() {
            el.className = 'animate';
                     transform = {
                translate: { x: START_X, y: START_Y },
                scale: 1,
                angle: 0,
                rx: 0,
                ry: 0,
                rz: 0
            };
            requestElementUpdate();
        }
            
        resetElement();
  }
}

xiaowenwu

/**
                                         第二次进入拖拽时  delta位移重置
                                         移动时 初始位置startxy不动。delta增加
                                 */
                                 function onPan(ev){
                                         if(!ev.isFinal) {
                                                 el.className = '';
                                                 console.log(START_X + "  " + START_Y + " |  " + ev.deltaX + "  " + ev.deltaY);
                                                 var chageX = START_X + ev.deltaX;
                                                 var chageY = START_Y + ev.deltaY;
                                                 if(chageX>clientWidth/2){
                                                         chageX = clientWidth/2;
                                                }
                                                 if(0-chageX>clientWidth/2){
                                                         chageX = 0-clientWidth/2;
                                                }
                                                 if(chageY>clientHeight/2){
                                                         chageY=clientHeight/2;
                                                 }
                                                 if(0-chageY>clientHeight/2){
                                                         chageY=0-clientHeight/2;
                                                 }
                                                transform.translate = {
                                                         x: chageX,
                                                         y: chageY
                                                 };
                                               
                                                 requestElementUpdate();
                                         }           
                                 }  


解决了，移动的时候判断一下屏幕宽、高

        var clientHeight =document.documentElement.clientHeight;
        var clientWidth =document.documentElement.clientWidth;