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

原创 2016年08月30日 15:03:26

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





 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下: ...

使用touch-punch.js实现移动端的拖放效果

一、下载文件并引入 下载地址:http://touchpunch.furf.com/ 引入: 这里可以查看参数http://www.cnblogs.com/ganqiyin/archiv...

手把手教你做APP官网网站(带动画效果,插入百度地图)

首页html文件 <script type="text/javascript" src="js/jquery-1.11.1.min.j

jquery实现拖拽以及jquery监听事件的写法

很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了。最近放到github上面,但是也少有人问津及s...

js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown、mousemove、mouse...

移动触摸屏的div拖动Demo

企业建站:莜霓网络 话说我刚刚从PC的Web开发转到移动的Web开发…… 当前移动Web开发不得不面对强大的流行的Android,IOS这两大触摸屏系统啊,毕竟这是热门啊,用户都在这里。 ...

移动端 例子div随手指移动

@charset "utf-8";        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,        form,fieldset,inpu...

jq div拖动(移动端和pc端)

jq 移动端和pc端 div 拖动

移动端 jquery 长按触发移动事件 <升级版>

长按触发移动事件,可以用于手机界面上返回导航图标 等等 将代码拷贝到本地,进行测试 在手机端测试,或者通过谷歌浏览器F12 测试 增加了对长按时间的判断,区分单击事件和长...

DIV固定不动,不随滚动条滚动且不闪动

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> chinm...
  • chinmo
  • chinmo
  • 2008-02-12 05:05
  • 38046
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)