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 手机端拖动方法的更多相关文章

  1. PHP判断是否为手机端的方法

    PHP判断是否为手机端的方法 private function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HT ...

  2. 手机端拖动div

    1.简单的css body {background-color: #eee;} .box {transition: all .05s linear;width: 5rem;height: 5rem;c ...

  3. jq判断是PC还是手机端的方法

    $(function(){ //判断是否是手机 var mobile_flag = isMobile(); if(mobile_flag){ $('.now_qq').attr('href',&quo ...

  4. Teamviewer 手机端怎么拖动窗口,选中文字

    Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的 点两下不松开就可以拖动 点两下不松开也可以选中文字 Teamviewer ...

  5. Android系统手机端抓包方法

    抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...

  6. ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

    ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...

  7. PHP判断客户端是PC web端还是移动手机端方法

    PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...

  8. Android系统手机端抓包方法(tcpdump)

    抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...

  9. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

随机推荐

  1. One day one cf,Keep Wa away from me.

    Codeforces Round #379 (Div. 2) A水,算字符个数 B水,贪心优先组成后者 C贪心尺取,以消耗排序change那个,然后贪心另一个 D对角线就是x0+y0 == x1+y1 ...

  2. CCNA毕业测试

    要求: 1:不同楼层物理隔离,但逻辑相连 2:相同楼层物理相连,但逻辑隔离 3:主机可以动态获取IP地址 4:不同VLAN间可以进行通信 5:主机最终访问www.baidu.com弹出Congratu ...

  3. VR全景智慧城市—城市就在你眼前

    "春风十里,不如有你",不知不觉间,身边的人已对VR不再陌生,VR眼镜的热销,VR体验店的火爆,VR游戏的向往等等.可见VR就是为生活而诞生! 2015年被称作VR行业的产业元年, ...

  4. VR全景:电商巨头的角逐

    VR全景智慧城市:京东推"京东梦"挑战淘宝Buy+ ,VR购物谁主沉浮? VR全景智慧城市是国内首家商业全景平台,结合先进VR虚拟现实技术,以线下实体为依托,将空间还原到线上,用户 ...

  5. CentOS 虚拟机安装详解

    第一步:安装 VMware 官方网站:www.vmware.com 下载百度云链接:http://pan.baidu.com/s/1bphDOWv 密码:0zix VMware 是一个虚拟 PC 的软 ...

  6. 化繁为简(三)—探索Mapreduce简要原理与实践

    目录-探索mapreduce 1.Mapreduce的模型简介与特性?Yarn的作用? 2.mapreduce的工作原理是怎样的? 3.配置Yarn与Mapreduce.演示Mapreduce例子程序 ...

  7. Java对【JSON数据的解析】--官方解析法

    要求:解析下面5个JSON数据 1.String string ="{name:'zhangsan',age:18}"; 2.String string2 = "{per ...

  8. JavaSE教程-04Java中循环语句for,while,do···while-练习

    0.实现打印50遍的"我爱你" 1.请在控制台输出数据1-10 2.请在控制台输出数据10-1 3.求出1-10之间数据之和 4.求出1-100之间能够被3整除的所有数的和 前四题 ...

  9. Eclipse用法:自动生成get和set方法

      方法一 Java的类中,除了常量声明为静态且公有的,一般的对象数据作用域,都是声明为私有的.这样做能保护对象的属性不会被随意改变,调试的时候也会方便很多:在类的公有方法中大一个调用栈就能看到哪里改 ...

  10. laravel中的多对多关系详解

    数据表之间是纵横交叉.相互关联的,laravel的一对一,一对多比较好理解,官网介绍滴很详细了,在此我就不赘述啦,重点我记下多对多的关系 一种常见的关联关系是多对多,即表A的某条记录通过中间表C与表B ...