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数组的堆栈和队列方法的操作,需要先对堆栈和队列基础知识有所了解,下面这篇文章主要给大家介绍了关于Javascript数据结构之栈和队列的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
微信分享的标题、缩略图、连接及描述该如何设置，这个问题确实难道不少朋友，下面有个示例，大家可以看看2014-10-10
最近遇到这样的需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。 这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下2018-08-08
javascript 删除select中的所有option的实例
这篇文章主要介绍了javascript 删除select中的所有option的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了不同编码的页面表单数据乱码问题解决方法,本文使用一个表单不常用属性accept-charset解决了这个问题,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了DWR3 访问WEB元素的两种方法实例详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了代码整洁之道(重构)，不管对于何种语言，重构都是软件开发过程中不可或缺的一部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
js中用window.open()打开多个窗口的name问题
这篇文章主要介绍了js中用window.open()打开多个窗口的问题,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了javascript实现简单留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
标识符指的是javascript中定义的符号，标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成，但标识符不能以数字开头，也不能是javascript中的保留关键字。并且要注意，javascript是严格区分大小写的。2015-06-06
最新评论