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. Jenkins获取git tags代码

    配置Jenkins获取git tag代码的方式其实方法很多,目前我使用比较多的主要是通过Git Parameter 来配置动态的获取最新tags代码,主要我们首先需要安装一下Git Parameter ...

  2. javaScript 设计模式系列之一:观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...

  3. 写给Android App开发人员看的Android底层知识(4)

    (八)App内部的页面跳转 在介绍完App的启动流程后,我们发现,其实就是启动一个App的首页. 接下来我们看App内部页面的跳转. 从ActivityA跳转到ActivityB,其实可以把Activ ...

  4. JBoss7 如何用脚本 启动 和 停止

    用脚本来启动/停止JBoss服务器,有助于开发部署的 自动执行,提高工作效率. 在JBoss以前的版本中,很容易在bin目录下面找到 启动和停止服务器的脚本: run.bat shutdown.bat ...

  5. 018 关联映射文件中<class>标签中的lazy(懒加载)属性

    Lazy(懒加载): 只有在正真使用该对象时,才会创建这个对象 Hibernate中的lazy(懒加载): 只有我们在正真使用时,它才会发出SQL语句,给我们去查询,如果不使用对象则不会发SQL语句进 ...

  6. DedeCMS数据负载性能优化方案简单几招让你提速N倍

    前文介绍了DedeCMS栏目列表页实现完美分页的方法,避免了大部分重复栏目标题对搜索引擎的影响,对SEO更有利.今天,分享一下DedeCMS数据负载性能优化的方法. 接触织梦也有三年多时间了,对它可谓 ...

  7. Java中的会话管理——HttpServlet,Cookies,URL Rewriting(译)

    参考谷歌翻译,关键字直接使用英文,原文地址:http://www.journaldev.com/1907/java-session-management-servlet-httpsession-url ...

  8. Java内存管理思维导图

    文 by / 林本托 Tips 做一个终身学习的人. 如果想要成为一名合格的 Java 程序员,就必须要涉及和掌握一些 Java 虚拟机的内部结构和特性.最近在读<深入理解Java 虚拟机> ...

  9. hive报错 Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:For direct MetaStore DB connections,

    学习hive 使用mysql作为元数据  hive创建数据库和切换数据库都是可以的 但是创建表就是出问题 百度之后发现 是编码问题 特别记录一下~~~ 1.报错前如图: 2.在mysql数据库中执行如 ...

  10. lucene全文搜索之四:创建索引搜索器、6种文档搜索器实现以及搜索结果分析(结合IKAnalyzer分词器的搜索器)基于lucene5.5.3

    前言: 前面几章已经很详细的讲解了如何创建索引器对索引进行增删查(没有更新操作).如何管理索引目录以及如何使用分词器,上一章讲解了如何生成索引字段和创建索引文档,并把创建的索引文档保存到索引目录,到这 ...