javascript小實例，移動端頁面中的拖拽

上文說到，想將移動端的拖拽說一說，那如今趁有時間，就將這個福利文帶來了，哈哈！

在我還不知道怎麼作移動端的手勢操做的時候，我以爲這TM實在是太難了，這是多麼高深的學問啊，手勢操做耶，上滑下滑左滑右滑的，手機怎麼知道我是怎麼滑的，我要怎麼告訴手機，我用手滑了一下，因而我就默默的找資料看看，

究竟是什麼樣的原理能夠實現這一點，因而，我找到了移動端手勢操做原生事件：

touchstart:     //手指放到屏幕上時觸發

touchmove:      //手指在屏幕上滑動式觸發

touchend:    //手指離開屏幕時觸發

touchcancel:     //系統取消touch事件的時候觸發，這個好像比較少用

每一個觸摸事件被觸發後，會生成一個event對象，event對象裏額外包括如下三個觸摸列表:

touches:     //當前屏幕上全部手指的列表

targetTouches:      //當前dom元素上手指的列表，儘可能使用這個代替touches

changedTouches:     //涉及當前事件的手指的列表，儘可能使用這個代替touches

 

看到他們，我簡直心生喜悅啊，簡直了，這不就是我苦苦尋覓的東西嗎？手機不再用擔憂個人手指在幹什麼了！

有了上面的這些原始事件，咱們能作什麼事情呢？

一、經過touches，咱們能夠知道屏幕上有幾根手指，那就能夠自定義一根手指作什麼，兩根手指作什麼，三根手指又作什麼；

二、咱們能夠經過手指在屏幕接觸的時間，來自定義輕觸，模擬點擊，長按，雙擊等等效果，固然這就比較高級了；

三、能夠自定義上滑下滑左滑右滑等手勢效果；

四、能夠模擬滾動條效果；

五、能夠實現手指拖拽效果；

。。。。。。

等等，能夠實現不少你想要實現的效果，只要你敢想，固然今天要講解的並非移動端手勢操做這麼大的話題，今天就從手指拖拽效果這一個小點開始，之後慢慢介紹移動端的那些事。

 

迴歸正題，上回咱們將了一下PC端的拖拽效果，不熟悉的同窗能夠看這裏查看，移動端的拖拽思想跟pc端很像，區別只是寫法不同，具體的實現原理我就不說了，不理解的請看PC端的介紹，PC端沒有用到綁定事件，其實也是能夠用綁定事件來綁定的，

移動端須要用綁定事件來觸發，具體代碼以下：

               /*
			參數說明：
			元素絕對定位，父級相對定位，若是父級爲window，則能夠不用
			傳一個參數，表示父級爲window，物體相對於window範圍拖動
			傳2個參數，則父級爲第二個參數，物體相對於父級範圍拖動
			參數爲id值
		*/
		function drag(obj,parentNode){
			var obj = document.getElementById(obj);
			if(arguments.length == 1){
				var parentNode = window.self;	
				var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;	
			}else{
				var parentNode = document.getElementById(parentNode);
				var pWidth = parentNode.clientWidth,pHeight = parentNode.clientHeight;
			}
			obj.addEventListener('touchstart',function(event){
				//當只有一個手指時				.
				if(event.touches.length == 1){
					//禁止瀏覽器默認事
					event.preventDefault();
				};
				var touch = event.targetTouches[0];
				var disX = touch.clientX - obj.offsetLeft,disY = touch.clientY - obj.offsetTop;	
				var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;

				obj.addEventListener('touchmove',function(event){
					var touch = event.targetTouches[0];
					obj.style.left = touch.clientX - disX  + 'px';
					obj.style.top = touch.clientY - disY + 'px';
					//左側
					if(obj.offsetLeft <=0){
						obj.style.left = 0;	
					};
					//右側
					if(obj.offsetLeft >= pWidth -oWidth){
						obj.style.left =  pWidth - oWidth + 'px';	
					};
					//上面
					if(obj.offsetTop <= 0){
						obj.style.top = 0;	
					};
					//下面
					if(obj.offsetTop >= pHeight - oHeight){
						obj.style.top =  pHeight - oHeight + 'px';	
					};					
				});
				obj.addEventListener('touchend',function(event){
					obj.removeEventListener('touchmove');
					obj.removeEventListener('touchend');
				})
			});
		}

這裏我也設置了2個參數，若是隻填一個參數，表示相對父級爲window，物體在window內拖動，若是填2個參數，第一個參數爲拖拽對象，第二個參數爲相對父級，跟pc差很少，有點不一樣的是，pc鼠標移動和彈起時，咱們做用的對象是document，是爲何防止鼠標拖動物體外面所帶來的bug，如今是做用於obj對象上，這是爲何呢？

緣由是在移動端上，若是有一個拖拽對象相對於window，一個拖拽對象相對於本身的相對父級，如今咱們是綁定事件，若是拖動後面這個拖拽對象，由於2個都是執行的，咱們把拖拽事件綁定到window，就會一塊兒觸發前面的拖拽，若是是綁定在拖拽物體上就能夠避免

事件的污染問題，由於都在自身嘛！

我相信實現拖拽的方法不僅這個，還有不少的方法能夠實現，我也相信我寫的這個代碼並非最優的，只能說能夠用用，因此，若是哪位大神有更好的實現方法，或者是代碼有什麼錯誤的地方，萬望指正！不勝感謝！

才疏學淺，先就到這裏!後續有時間，咱們在一塊兒聊一聊移動端前端的那些事！哈哈~