JS实现移动端触屏拖拽功能


Posted in Javascript onJuly 31, 2018

1.html

<div id="div1"></div>

2.css

* {
 margin: 0;
 padding: 0;
}
html,
body {
 width: 100%;
 height: 100%;
}
#div1 {
 width: 50px;
 height: 50px;
 background: cyan;
 position: absolute;
}

3.js

var div1 = document.querySelector('#div1');
//限制最大宽高,不让滑块出去
var maxW = document.body.clientWidth - div1.offsetWidth;
var maxH = document.body.clientHeight - div1.offsetHeight;
//手指触摸开始,记录div的初始位置
div1.addEventListener('touchstart', function(e) {
 var ev = e || window.event;
 var touch = ev.targetTouches[0];
 oL = touch.clientX - div1.offsetLeft;
 oT = touch.clientY - div1.offsetTop;
 document.addEventListener("touchmove", defaultEvent, false);
});
//触摸中的,位置记录
div1.addEventListener('touchmove', function(e) {
 var ev = e || window.event;
 var touch = ev.targetTouches[0];
 var oLeft = touch.clientX - oL;
 var oTop = touch.clientY - oT;
 if(oLeft < 0) {
 oLeft = 0;
 } else if(oLeft >= maxW) {
 oLeft = maxW;
 }
 if(oTop < 0) {
 oTop = 0;
 } else if(oTop >= maxH) {
 oTop = maxH;
 }
 div1.style.left = oLeft + 'px';
 div1.style.top = oTop + 'px';
});
//触摸结束时的处理
div1.addEventListener('touchend', function() {
 document.removeEventListener("touchmove", defaultEvent);
});
//阻止默认事件
function defaultEvent(e) {
 e.preventDefault();
}

3.效果

JS实现移动端触屏拖拽功能

JS实现移动端触屏拖拽功能

4.几点说明

      对于触屏手机端用手指事件,对于PC端用鼠标事件,其实原理都一样。

总结

以上所述是小编给大家介绍的JS实现移动端触屏拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 #Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 #Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 #Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 #Javascript
vue实现word,pdf文件的导出功能
Jul 31 #Javascript
在create-react-app中使用css modules的示例代码
Jul 31 #Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
You might like
PHP函数常用用法小结
2010/02/08 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
JS实现滑动插件
2020/01/15 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python/golang 删除链表中的元素
2020/09/14 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
人事部主管岗位职责
2013/12/26 职场文书
委托书的格式
2014/08/01 职场文书
护士医德医风自我评价
2014/09/15 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
给朋友的赠语
2015/06/23 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis