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，就会一块儿触发前面的拖拽，若是是绑定在拖拽物体上就能够避免

事件的污染问题，由于都在自身嘛！

我相信实现拖拽的方法不仅这个，还有不少的方法能够实现，我也相信我写的这个代码并非最优的，只能说能够用用，因此，若是哪位大神有更好的实现方法，或者是代码有什么错误的地方，万望指正！不胜感谢！

才疏学浅，先就到这里!后续有时间，咱们在一块儿聊一聊移动端前端的那些事！哈哈~