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

最新推荐文章于 2024-04-09 17:34:36 发布

Knight__D

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量4k

点赞数

分类专栏： web前端 JQuery JavaScript

本文链接：https://blog.csdn.net/dihuiqin/article/details/72896993

版权

web前端同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

JQuery

6 篇文章 0 订阅

订阅专栏

今天接到一个任务，里面有个小动画是，手指拖动火柴到蜡烛上，蜡烛点燃。现在研究了下元素随手指移动的代码。

<!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>

触摸事件

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

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

Knight__D

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5移动端：元素拖动/触控touch（js）(jquery)

今天接到一个任务，里面有个小动画是，手指拖动火柴到蜡烛上，蜡烛点燃。现在研究了下元素随手指移动的代码。 Mobile Cookbook#someElm {width: 100px;height: 100px;background:#ccc;position:absolute;}
复制链接

扫一扫