touchmover 手机端拖动方法
function drag(obj, parentNode) {
var obj = document.getElementById(obj);
if (arguments.length == 1) {
var parentNode = window.self;
var pWidth = parentNode.innerWidth, pHeight = parentNode.innerHeight;
} else {
var parentNode = document.getElementById(parentNode);
var pWidth = parentNode.clientWidth, pHeight = parentNode.clientHeight;
}
obj.addEventListener('touchstart', function (event) {
//当只有一个手指时 .
if (event.touches.length == 1) {
//禁止浏览器默认事
// event.preventDefault();
};
var touch = event.targetTouches[0];
var disX = touch.clientX - obj.offsetLeft, disY = touch.clientY - obj.offsetTop;
var oWidth = obj.offsetWidth, oHeight = obj.offsetHeight;
obj.addEventListener('touchmove', function (event) {
var touch = event.targetTouches[0];
obj.style.left = touch.clientX - disX + 'px';
obj.style.top = touch.clientY - disY + 'px';
//左侧
console.log(obj.offsetLeft)
if (obj.offsetLeft - 40 <= 0) {
obj.style.left = 0;
};
//右侧
if (obj.offsetLeft >= pWidth - oWidth) {
obj.style.left = pWidth - oWidth + 'px';
};
//上面
if (obj.offsetTop <= 0) {
obj.style.top = 0;
};
//下面
if (obj.offsetTop >= pHeight - oHeight) {
obj.style.top = pHeight - oHeight + 'px';
};
});
obj.addEventListener('touchend',function(event){
obj.removeEventListener('touchmove');
obj.removeEventListener('touchend');
})
});
}
touchmover 手机端拖动方法的更多相关文章
- PHP判断是否为手机端的方法
PHP判断是否为手机端的方法 private function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HT ...
- 手机端拖动div
1.简单的css body {background-color: #eee;} .box {transition: all .05s linear;width: 5rem;height: 5rem;c ...
- jq判断是PC还是手机端的方法
$(function(){ //判断是否是手机 var mobile_flag = isMobile(); if(mobile_flag){ $('.now_qq').attr('href',&quo ...
- Teamviewer 手机端怎么拖动窗口,选中文字
Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的 点两下不松开就可以拖动 点两下不松开也可以选中文字 Teamviewer ...
- Android系统手机端抓包方法
抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...
- ThinkPHP3.2判断手机端访问并设置默认访问模块的方法
ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...
- PHP判断客户端是PC web端还是移动手机端方法
PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...
- Android系统手机端抓包方法(tcpdump)
抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
随机推荐
- Eclipse中启动tomcat时内存溢出
今天在启动自己项目的时候遇到一个永久带(permgen space)内存溢出,查找了很多资料和请教了许多大神,最终才解决问题. 一.什么原因造成了永久带溢出: 1.项目使用了太多的静态变量 2.加载了 ...
- 【JAVAWEB学习笔记】15_request
HttpServletRequest 学习目标 案例一.完成用户注册 案例二.完成登录错误信息的回显 1.HttpServletRequest概述 我们在创建Servlet时会覆盖service()方 ...
- MySql学习笔记(一) —— 数据的分组
前面介绍的聚集函数只是用来计算行数,平均数,最大值,最小值而不用检索所有数据.通过count()函数,我们可以计算生产商1003提供的产品数目,但如果我要查询所有生产商提供的商品数,这就需要进行分组查 ...
- Lesser known purrr tricks
purrr is package that extends R's functional programming capabilities. It brings a lot of new stuff ...
- R语言机器学习之caret包运用
在大数据如火如荼的时候,机器学习无疑成为了炙手可热的工具,机器学习是计算机科学和统计学的交叉学科, 旨在通过收集和分析数据的基础上,建立一系列的算法,模型对实际问题进行预测或分类. R语言无疑为我们提 ...
- Zepto源码分析-动画(fx fx_method)模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- struts2+hibernate+spring注解版框架搭建以及简单测试(方便脑补)
为了之后学习的日子里加深对框架的理解和使用,这里将搭建步奏简单写一下,目的主要是方便以后自己回来脑补: 1:File--->New--->Other--->Maven--->M ...
- JavaScript设计模式_03_代理模式
代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最 ...
- 移动端设置fixed布局的问题解决
最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...
- 【MyBatis源码解析】MyBatis一二级缓存
MyBatis缓存 我们知道,频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级),尤其是对于一些相 ...