html5移动端：元素拖动/触控touch（js）(jquery)

最新推荐文章于 2025-06-03 09:11:34 发布

u010242159

最新推荐文章于 2025-06-03 09:11:34 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010242159/article/details/52369347

本文介绍了HTML5移动端元素的拖动功能，通过JavaScript和jQuery实现。主要内容包括：1) 使用touchmove事件处理拖动，结合e.touches[0].clientX获取手指位置；2) 解决jQuery中e.pageX在某些环境下返回undefined的问题，改用e.originalEvent.pageX；3) 解析触摸事件touchstart、touchmove和touchend，以及它们的触摸列表属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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