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 ...
随机推荐
- oracle11g interval(numtoyminterval())自动创建表分区
Oracle11g通过间隔分区实现按月创建表分区 在项目数据库设计过程中由于单表的数据量非常庞大,需要对表进行分区处理.由于表中的数据是历史交易,故按月分区,提升查询和管理. 由于之前对于表分区了解不 ...
- OutofMemory之PermGen介绍
可参考:https://my.oschina.net/benhaile/blog/214159.
- AngularJS的简单使用
官网下载:AngularJS 路由视图需要:Angular-Route.js 基于zepto的轻量级的 JavaScript UI 库: App.js 用于开发跨平台的移动Web应用 <!DO ...
- 怎么使用Delphi获取当前的时间，精确到毫秒
先介绍一个可能比较常用的方法,获取当前时间 var datetime: string; begin datetime:= FormatDateTime('yyyy-mm-dd hh:mm:ss', N ...
- 2016-11-05实战-定义ssh服务的日志
1.编辑/etc/rsyslog.conf 输入 local 0 .* /var/log/sshd.log #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...
- notes
http://www.cnblogs.com/titicia/p/4388318.html http://blog.csdn.net/kanosword/article/details/5258679 ...
- linux进程
E: 进程------->进程控制块PCB 结构体 进程控制块中,存放的是指针数组------>是已经打开的文件的结构体的指针 文件描述符实际上就是指针数组的索引 e1: ps命令(进 ...
- SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
java日期格式大全 format SimpleDateFormat(转) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH ...
- JAVABeanUtils
在写如何使用java BeanUlits 之前需要清楚几件事情 1. 我们每次所定义的类,其实是实体,同时也被称作为JavaBean; 2. 为什么我们要使用BeanUlits这个框架 &g ...
- Good Bye 2016 - C
题目链接:http://codeforces.com/contest/750/problem/C 题意:在CF中,每个人都有个Rank值. 当Rank>=1900时,为DIV1.Rank< ...