javascript实现移动端上的触屏拖拽功能
更新时间：2016年03月04日 09:13:14 作者：Cakty、Riven
这篇文章主要为大家详细介绍了基于javascript实现移动端上的触屏拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文是分享了javascript实现移动端上的触屏拖拽功能，具体内容如下
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<style>
body {
height: 2000px;
}
#block {
width:200px;
height:200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
touchstart,touchmove,
touchend,touchcancel
</div>
<div id="block"></div>
<script>
// 获取节点
var block = document.getElementById("block");
var oW,oH;
// 绑定touchstart事件
block.addEventListener("touchstart", function(e) {
console.log(e);
var touches = e.touches[0];
oW = touches.clientX - block.offsetLeft;
oH = touches.clientY - block.offsetTop;
//阻止页面的滑动默认事件
document.addEventListener("touchmove",defaultEvent,false);
},false)
block.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if(oLeft < 0) {
oLeft = 0;
}else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth);
}
block.style.left = oLeft + "px";
block.style.top = oTop + "px";
},false);
block.addEventListener("touchend",function() {
document.removeEventListener("touchmove",defaultEvent,false);
},false);
function defaultEvent(e) {
e.preventDefault();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了详细讨论JavaScript中的求值策略，对求值策略感兴趣的同学，可以参考下2021-04-04
这篇文章主要为大家详细介绍了JavaScript的DOM与BOM的区别与用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
js产生随机数通常是使用javascript的Math.random()函数,下面这篇文章主要给大家介绍了关于JS生成随机数的多种方法(不同范围、类型的随机数)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行2016-05-05
这篇文章主要介绍了JS模拟浏览器实现全局搜索功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了解读input标签的value属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象2011-05-05
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单2017-03-03
这篇文章主要介绍了CocosCreator纹理shader的一些知识，想了解shader的同学，一定要看下，并且亲自动手实践2021-04-04
最新评论