html5移动端拖拽

最新推荐文章于 2024-10-30 14:01:17 发布

weixin_30408675

最新推荐文章于 2024-10-30 14:01:17 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiecheng/p/5535532.html

本文提供了一个使用JavaScript实现触摸移动HTML元素的例子。通过监听touchmove事件并阻止其默认行为，实现了只用一个手指拖动页面上的指定元素。此示例适用于移动端网页开发。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="bbs_sign" id="bbsSi" draggable="true"><img src="img/bi.png">我要发帖</div>

<script type="text/javascript">
var bbsSi=document.getElementById("bbsSi");
//监听
bbsSi.addEventListener('touchmove',function(event){
//阻止默认
event.preventDefault();
//判断是否是一个手指
if(event.targetTouches.length==1)
{
//拖拽最后的位置
var touch = event.targetTouches[0];
bbsSi.style.right = 0;
bbsSi.style.top = touch.pageY + 'px';    }
},false);
</script>