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 ：畫出大約相當於手指形狀的橢圓形。