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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
详谈javascript异步编程
Feb 21 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php微信开发之谷歌测距
2018/06/14 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
初探nodeJS
2017/01/24 NodeJs
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
Python六大开源框架对比
2015/10/19 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python将string转换到float的实例方法
2019/07/29 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
英语商务邀请函范文
2014/01/16 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
教师节感谢信
2015/01/22 职场文书
担保书格式范文
2015/09/22 职场文书
python基于turtle绘制几何图形
2021/06/15 Python