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是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
随机推荐
- swift学习 - tableView自适应高度1(xib autoLayout)
tableView自适应高度 效果图: 源码: class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSo ...
- 利用HTTP-only Cookie缓解XSS之痛
在Web安全领域,跨站脚本攻击时最为常见的一种攻击形式,也是长久以来的一个老大难问题,而本文将向读者介绍的是一种用以缓解这种压力的技术,即HTTP-only cookie. 我们首先对HTTP-onl ...
- OpenStack云平台的网络模式及其工作机制
网络,是OpenStack的部署中最容易出问题的,也是其结构中难以理清的部分.经常收到关于OneStack部署网络方面问题和OpenStack网络结构问题的邮件.下面根据自己的理解,谈一谈OpenSt ...
- web worker 扫盲篇
什么是woker 官方的解释是这样的: worker是一个对象,通过构造函数Worker创建,参数就是一个js文件的路径:文件中的js代码将运行在主线程之外的worker线程: var jsFileU ...
- springboot 1.5.2 集成kafka 简单例子
添加依赖 compile("org.springframework.kafka:spring-kafka:1.1.2.RELEASE") 添加application.propert ...
- JVM-1.编译
目录 一.编译器概述 二.编译器组成 三.示例 四.深入理解JVM中的编译器 五.语法糖 六.补充 一.编译器概述 1.编译器实质 编译器的实质是将一种语言规范转化为另一种语言规范:由人容易理 ...
- 一天搞定CSS:盒模型content、padding、border、margin--06
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...
- 网络编程应用:基于TCP协议【实现对象传输】--练习
要求: 基于TCP协议实现,客服端向服务器发送一个对象 服务器接受并显示用户信息 ,同时返回给客户端 "数据已收到" 建一个Student类,属性:name age Student ...
- Ch.3 Aray and String
3-1 scrore Here is a string with o and x. The length is between 1 to 80. Calcuate the score. The sc ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...