html5移动端：元素拖动/触控touch（js）(jquery)
一、html5移动端：元素拖动（js）
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<title></title>
<style>
*{ margin: 0; padding: 0; font-family: arial; }
#main{
width: 100px;
height: 100px;
background:#ccc;
position:absolute;
left: 10px;
top:20px;
/* position:relative;*/
}
</style>
</head>
<body>
<div id="container">
<header>
</header>
<div style="width: 100px; height: 100px;display: block; border: 5px; margin-top: 10px;">
AAAAAAAAAAAAA
</div>
<div id="main"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
//getOffsetSum 获取相对与document的偏移量
function getOffsetSum(ele){
var top= 0,left=0;
while(ele){
top+=ele.offsetTop;
left+=ele.offsetLeft;
ele=ele.offsetParent;
}
/* alert(left+" : "+top);*/
return { top:top, left:left }
}
var maindiv=document.getElementById("main");
maindiv.addEventListener("touchmove",touch,false);
function touch(e)
{
switch(e.type)
{
case "touchmove":
var ele=getOffsetSum(e.target);
var left=ele.left;
var top=ele.top;
var x=e.touches[0].clientX-left/2;
var y=e.touches[0].clientY-top/2;
e.preventDefault();
// alert(e.target.id);
e.target.style.marginLeft=x+"px";
e.target.style.marginTop=y+"px";
/* $(e.target).css("left","50px");
$(e.target).css("top","50px");*/
}
}
</script>
</html>
总结点：
1. touchmove 移动端拖动响应事件
2. 手触屏拖动是当前X坐标：e.touches[0].clientX
3. 元素的原有特性失效：e.preventDefault();
二、html5移动端：元素拖动（js）
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#someElm {
width: 100px;
height: 100px;
background:#ccc;
position:absolute;
}
</style>
</head>
<body>
<header>
</header>
<div id="main">
<div id="someElm">
</div>
</div>
<footer>
</footer>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->
<script>
$('#someElm').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
var elm = $(this).offset();
var x = touch.pageX - elm.left/2;
var y = touch.pageY - elm.top/2;
$(this).css('left', x+'px');
$(this).css('top', y+'px');
console.log(touch.pageY+' '+touch.pageX);
});
</script>
</body>
</html>
总结：
在使用jquery的e.pageX时，发现其获得的值一直是undefined，百度了一下，换成了e.originalEvent.pageX就好了，问题是解决了，但是不知道原因，于是在Stack Overflow上搜了一下，在这里给大家翻译一下。
event.originalEvent是原生的js event，如果浏览器是兼容或者是在可触的设备上使用，API通常是暴漏给event.originalEvent。简单来说，event.originalEvent会根据触发时间类型和浏览器运行环境表现不一。移动版Sarari 不允许event对象的touches 和changedTouches属性被拷贝给其他对象，我们可以使用e.originalEvent来解决。
触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches ：当前位于屏幕上的所有手指的一个列表。
2. targetTouches ：位于当前DOM元素上的手指的一个列表。
3. changedTouches ：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier ：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2. target ：DOM元素，是动作所针对的目标。
3. 客户/页面/屏幕坐标 ：动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle ：画出大约相当于手指形状的椭圆形。