一 拖放
拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
课程参考 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
二 手机触屏事件
1 触屏事件
touchstart
当手指触摸到屏幕时触发
touchmove
手指在屏幕上移动时触发
touchend
手指离开屏幕时触发
touchenter
当触点进入某个 element 时触发。
touchleave
当触点离开某个 element 时触发。
touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：
由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。
总结：触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。
1.1 触控手机屏幕例子：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div {
100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
<script>
var div = document.getElementById("div");
div.addEventListener("touchstart", function() {
console.log("接触到屏幕");
})
div.addEventListener("touchmove", function() {
console.log("在屏幕上移动");
})
div.addEventListener("touchend", function() {
console.log("离开屏幕");
})
</script>
</html>
2 触控点信息
每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度
2.1 打印触屏事件信息
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
100px;height:100px;background:red;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
<script>
var div = document.getElementById("div");
div.addEventListener("touchstart",function(e){
console.log("touchstart e.targetTouches="+e.targetTouches.length );
})
div.addEventListener("touchmove",function(e){
console.log("touchmove e.changedTouches[0].pageX="+e.changedTouches[0].pageX);
})
div.addEventListener("touchend",function(){
console.log("离开屏幕");
})
</script>
</html>
2.2 在屏幕上移动图片例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1,user-scalable =no">
<style>
#myDiv{
left: 50px;
top: 100px;
position: fixed;
border: 4px solid red;
}
</style>
</head>
<body>
<div id="myDiv"><img src="img/guangdongIcon.png"/></div>
<script type="text/javascript">
var obj = document.getElementById('myDiv');
obj.addEventListener('touchmove', function(event) {
console.log(event.targetTouches.length)
// 如果这个元素的位置内只有一个手指的话
if(event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX - 50 + 'px';
obj.style.top = touch.pageY - 50 + 'px';
}
}, false);
</script>
</body>
</html>
知识点：
preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。以下代码JS会阻止链接跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" id="test">测试跳转 </a>
<script type="text/javascript">
function stopDefault(e) {
if(e && e.preventDefault) { //如果是FF下执行这个
e.preventDefault();
} else {
window.event.returnValue = false; //如果是IE下执行这个
}
return false;
}
var test = document.getElementById('test');
test.onclick = function(e) {
alert('URL：' + this.href + ', 不会跳转');
stopDefault(e);
}
</script>
</body>
</html>
资料参考：
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
http://blog.sina.com.cn/s/blog_51048da70101f0ex.html