关闭

html5移动端:元素拖动/触控touch(js)(jquery)

4498人阅读 评论(0) 收藏 举报

一、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 :画出大约相当于手指形状的椭圆形。





 
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:35088次
    • 积分:868
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:7篇
    • 译文:2篇
    • 评论:0条
    文章分类