上文說到，想將移動端的拖拽說一說，那現在趁有時間，就將這個福利文帶來了，哈哈！
在我還不知道怎麼做移動端的手勢操作的時候，我覺得這TM實在是太難了，這是多麼高深的學問啊，手勢操作耶，上滑下滑左滑右滑的，手機怎麼知道我是怎麼滑的，我要怎麼告訴手機，我用手滑了一下，於是我就默默的找資料看看，
到底是什麼樣的原理可以實現這一點，於是，我找到了移動端手勢操作原生事件：
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用
每個觸摸事件被觸發後，會生成一個event對象，event對象裡額外包括以下三個觸摸列表:
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
看到他們，我簡直心生喜悅啊，簡直了，這不就是我苦苦尋覓的東西嗎？手機再也不用擔心我的手指在干什麼了！
有了上面的這些原始事件，我們能做什麼事情呢？
1、通過touches，我們可以知道屏幕上有幾根手指，那就可以自定義一根手指做什麼，兩根手指做什麼，三根手指又做什麼；
2、我們可以通過手指在屏幕接觸的時間，來自定義輕觸，模擬點擊，長按，雙擊等等效果，當然這就比較高級了；
3、可以自定義上滑下滑左滑右滑等手勢效果；
4、可以模擬滾動條效果；
5、可以實現手指拖拽效果；
。。。。。。
等等，可以實現很多你想要實現的效果，只要你敢想，當然今天要講解的並不是移動端手勢操作這麼大的話題，今天就從手指拖拽效果這一個小點開始，以後慢慢介紹移動端的那些事。
回歸正題，上回我們將了一下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，就會一起觸發前面的拖拽，如果是綁定在拖拽物體上就可以避免
事件的污染問題，因為都在自身嘛！
我相信實現拖拽的方法不只這個，還有很多的方法可以實現，我也相信我寫的這個代碼並不是最優的，只能說可以用用，所以，如果哪位大神有更好的實現方法，或者是代碼有什麼錯誤的地方，萬望指正！不勝感謝！
才疏學淺，先就到這裡!後續有時間，我們在一起聊一聊移動端前端的那些事！哈哈~