使用javascript实现手机上的touchmove效果

完成效果：

只能在手机上演示效果，电脑上可以用chrome浏览器开发者工具中的UA来模拟手机。

	
		
		
		
		
		
		
	

	
		

			
在手机上实现图标滑动效果
			


				
标题一
				
标题二
				
标题三
				
标题4
				
标题5
				
标题6
				
标题7
				
标题8
				
标题9
				
标题10
				
标题11
				
标题12
			
			


		


	

 
  
 
  
 
  
 参考博客 
  
 
  
背景：手机浏览器不支持JQuery的mousedown,mousemove,mouseup事件，想用jquery来写，但是百度过后发现jquery也没有支持手机手势滑动的方法。最终找到了上面的这篇博客才解决了问题。
 
  
 
  
nav_widthx = document.body.clientWidth; //获取可视区域宽度
 
  
max_width = (tag_num * 60 - nav_widthx + 100) * -1; //获取左滑最大距离
 
  
上述代码是为了在滑到最右边的时候，控制左滑最大距离，不会让菜单消失。
 
  
不足之处：
 
  
 
  
document.getElementById("head").addEventListener('touchstart', touchStart);
				document.getElementById("head").addEventListener('touchmove', touchMove);
				document.getElementById("head").addEventListener('touchend', function() {
					isMove = false;
				});
 
  
tx = parseInt($("#head").css('left'));//这个地方也需要改
 
  
 
  
 
  元素绑定事件有些繁琐，不知道怎样写可以让调用的时候尽量简化。因为页面中不止这一个要滑动的部分。 
  
 
  
最后像这样调用：$(".head").drag();
 
  
有知道怎么写的一定要告诉我啊~~