手機端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中修改所須要的拖動的元素