一、html5移动端:元素拖动(js)
*{
margin: 0;
padding: 0;
font-family: arial;
}
#main{
width: 100px;
height: 100px;
background:#ccc;
position:absolute;
left: 10px;
top:20px;
/* position:relative;*/
}
AAAAAAAAAAAAA
//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");*/
}
}
总结点:
1. touchmove 移动端拖动响应事件
2. 手触屏拖动是当前X坐标:e.touches[0].clientX
3. 元素的原有特性失效:e.preventDefault();
二、html5移动端:元素拖动(js)
Mobile Cookbook#someElm {
width: 100px;
height: 100px;
background:#ccc;
position:absolute;
}
$('#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);
});
总结:
在使用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 :画出大约相当于手指形状的椭圆形。