手机端touch事件实现元素拖拽效果 2

经上次的手机端拖拽事件，再次经过完善修改，加入了元素不能拖出屏幕范围功能，并做了一个小的函数接口

ps：经落雨大神指点。

代码如下：

            var touchEvent = (function(){

			var oDiv = document.getElementsByTagName(‘div‘)[0],   //获取可拖动元素
				oIpt = document.getElementsByTagName(‘input‘)[0],    	//记录拖动元素位置
				oIpt1 = document.getElementsByTagName(‘input‘)[1];     //记录触点位置  

			var touchSatrtFunc,touchMoveFunc,getTouchEvent;   

			var _this = this;     

		    var opinion = {      //所需变量集
				oDiv : oDiv,
				oIpt : oIpt,
				oIpt1 : oIpt1,
				startX : "",
		    	startY : "",
		    	startPositionX : "",
		    	startPositionY : "",
		    	elemWidth : "",
		    	elemHeight : "",
		    	byWidth : "",
		    	byHeight : ""
			}

			//触摸点下事件
			touchSatrtFunc = function(e){
				e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
			    var touch = e.touches[0]; //获取第一个触点
			    var x = Number(touch.pageX); //页面触点X坐标
			    var y = Number(touch.pageY); //页面触点Y坐标
			    //记录触点初始位置
			    startX = x;
			    startY = y;

			    //可拖动元素距离页面顶部的距离
			    startPositionY = oDiv.offsetTop;
			    //可拖动元素距离页面左侧的距离
			    startPositionX = oDiv.offsetLeft;
			    //可拖动元素的宽度
			    elemWidth = oDiv.offsetWidth;
			    //可拖动元素的高度
			    elemHeight = oDiv.offsetHeight;
			    //网页可见区域宽
			    byWidth = document.documentElement.clientWidth ;
			    //网页可见区域高
			    byHeight = document.documentElement.clientHeight  ;
			}

			//触摸点下移动事件
			touchMoveFunc = function(e){
				e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
			    var touch = e.touches[0]; 	//获取第一个触点
			    var x = Number(touch.pageX); //页面触点X坐标
			    var y = Number(touch.pageY); //页面触点Y坐标 

			    var fnyTop = startPositionY + (y-startY),
			    	fnyLeft = startPositionX + (x-startX);

			    oIpt.value = "元素位置：" +startPositionX +":"+startPositionY;
			    oIpt1.value = "触点位置：" +x +":"+y;

			    //判断移动到边缘情况
			    if(fnyLeft <= 0){
			    	oDiv.style.left = 0;

			    	if(fnyTop <= 0){
			    		oDiv.style.top = 0;
			    	}else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){
			    		oDiv.style.top = fnyTop + ‘px‘;
			    	}else if(fnyTop >= (byHeight - elemHeight) ){
			    		oDiv.style.top = byHeight - elemHeight + ‘px‘;
			    	}
			    }else if(fnyLeft >= (byWidth - elemWidth) ){
			    	oDiv.style.left = byWidth - elemWidth + ‘px‘;

			    	if(fnyTop <= 0){
			    		oDiv.style.top = 0;
			    	}else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){
			    		oDiv.style.top = fnyTop + ‘px‘;
			    	}else if(fnyTop >= (byHeight - elemHeight) ){
			    		oDiv.style.top = byHeight - elemHeight + ‘px‘;
			    	}
			    }else if(fnyLeft > 0 &&  fnyLeft < (byWidth - elemWidth) ){
			    	oDiv.style.left = fnyLeft + ‘px‘;

			    	if(fnyTop <= 0){
			    		oDiv.style.top = 0;
			    	}else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){
			    		oDiv.style.top = fnyTop + ‘px‘;
			    	}else if(fnyTop >= (byHeight - elemHeight) ){
			    		oDiv.style.top = byHeight - elemHeight + ‘px‘;
			    	}
		     	}
			}

			var touchs = function(){
				oDiv.addEventListener(‘touchstart‘,touchSatrtFunc,false);
    			oDiv.addEventListener(‘touchmove‘,touchMoveFunc,false);
			}

			return {
				getTouch:touchs,
				touchSatrtFunc : touchSatrtFunc,
				touchMoveFunc : touchMoveFunc
			}
	    })();

　　调用此方法时只需加入  touchEvent.getTouch();  即可

然而此代码还有局限性，目前需要去原js中修改所需要的拖动的元素