touchstart、touchmove、touchend 实现移动端上的触屏拖拽
<!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);
}
if(oTop<0){
oTop=0;
}else if(oTop > document.documentElement.clientHeight - block.offsetHeight){
oTop=(document.documentElement.clientHeight - block.offsetHeight);
}
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>
注：本例在谷歌浏览器的模拟器上测试，未进行真机测试！
touchstart、touchmove、touchend 实现移动端上的触屏拖拽的更多相关文章
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 获取touchstart,touchmove,touchend 坐标
简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 移动端touchstart,touchmove,touchend
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- 移动端touch事件——单指拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 移动端 微信 网易 触屏滑动回弹菜单(css版)
总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带) 只支持持续滑动,不 ...
- js实现文件的上传和输出,拖拽上传图片
js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...
随机推荐
- 【python】with的实现方法
来源:http://www.ibm.com/developerworks/cn/opensource/os-cn-pythonwith/#icomments 重点: with方法适用于需要分配和清理资 ...
- linux下用c实现ls命令
struct dirent中的几个成员: d_type:4表示为目录,8表示为文件 d_reclen:16表示子目录或文件,24表示非子目录 d_name:目录或文件的名称 #include < ...
- Reason: image not found
刚生的Xcode8,出现好多Error,有些Error真的太麻烦不想记录,现在这个挺简单的,就记下来,控制台输出的Error信息如下: fix: Target -> Build Phases - ...
- Date、Calender类及日期和字符串转换
Calendar是一个抽象类,抽象类java.util.Calendar 不可以通过new来获取一个实例,可以通过类方法getinstance()获取此类型的一个通用的对象 ①用法: Calendar ...
- 百度地图API显示多个标注点带检索框
通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- Python 判断字符串是否为数字
转载: http://www.runoob.com/python3/python3-check-is-number.html 以下实例通过创建自定义函数 is_number() 方法来判断字符串是否为 ...
- 在Linux下配置多线路ADSL的方法
经过一段时间的观察,证明运行良好,现把设置过程及方法总结一下,欢迎指正.此文档可以说明双ADSL及多ADSL增加线路的配置过程. 实验环境: 操作系统: RedHat7.3 两条ADSL,长期观察线路 ...
- phpcms 整合 discuz！
第一步,进入discuz后台,点击UCenter菜单,然后点击应用管理,接着点击右侧的添加新应用按钮 然后填写应用相关信息: 1.应用类型选择“其他” 2.应该名称填写“phpcms” //此处可以自 ...
- Mvc HtmlHelper 方法扩展 DropDownListFor
项目中遇到表单提交中遇到枚举,忽然想起1年前的1小段代码结合HtmlHelper在扩展一下 便于开发中使用 public static class HtmlHelperExtensions { p ...
- mysql 列类型