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





 

js,jQuery实现拖拽自定义移动端板块,web移动端开发

由于项目需求,需要一个能排版移动端页面布局的插件,因此,作为前端的就首当其任了 一般情况下写代码,时间充足我都会先写一遍原生JS 效果,实例代码如下css : ...
  • chenyi0713
  • chenyi0713
  • 2017年01月13日 11:00
  • 358

Hammer.js 实现移动端元素的拖拽库

Hammer.js是一个可以实现移动端元素拖拽的库。其功能还是比较全的,主要针对触屏的6大事件进行监听:【引用内容转自李林峰的园子】 1、 Pan事件:在指定的dom区域内,一个手指放下并...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年03月09日 17:45
  • 7614

让jQuery UI draggable兼容移动端

用jQyery UI的draggable可以很方便地在PC端实现页面元素的可拖放,不过jQyery UI不是为移动端而写的,因此这个draggable方法在手机上无效。这么普通的问题,当然已经有了现成...
  • junzhen_chen
  • junzhen_chen
  • 2017年05月18日 10:04
  • 1058

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

一、下载文件并引入 下载地址:http://touchpunch.furf.com/ 引入: 这里可以查看参数http://www.cnblogs.com/ganqiyin/archiv...
  • u012011360
  • u012011360
  • 2015年05月15日 12:17
  • 3776

Pc端和移动端拖拽组件jquery.drag.js

移动市场开始火爆以来,网页上的拖拽效果则要做到全兼容则不是一件易事,因此最近把研究成果奉上,供大家使用。...
  • pvfhv
  • pvfhv
  • 2011年02月08日 01:59
  • 9261

jQuery拖拽移动

jquery sortable 它所有的事件回调函数都有两个参数:event和ui ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.posi...
  • sunhuwh
  • sunhuwh
  • 2015年08月11日 21:24
  • 753

HTML5 移动端div块跟随手指拖动

移动端div块跟随手指拖动,pc端div根据鼠标拖动请用mousemove事件,代码如下请勿转载! ...
  • ITer_hua
  • ITer_hua
  • 2016年12月07日 10:22
  • 4919

移动端拖拽的实现效果

拖拽
  • xyphf
  • xyphf
  • 2016年07月21日 23:17
  • 3472

支持手机和电脑拖拽代码 【简单版jquery】

HTML部分          css部分 @charset "gb2312"; /* CSS Document */ * { margin: 0; padding: 0; ...
  • u013027894
  • u013027894
  • 2015年10月29日 11:00
  • 179

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

jq 移动端和pc端 div 拖动
  • bini000
  • bini000
  • 2017年06月30日 11:12
  • 864
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5移动端:元素拖动/触控touch(js)(jquery)
举报原因:
原因补充:

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