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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
angular实现商品筛选功能
Feb 01 Javascript
node.js的事件机制
Feb 08 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python写程序统计词频的方法
2019/07/29 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
企业演讲稿范文
2013/12/28 职场文书
平安建设工作方案
2014/06/02 职场文书
工地安全标语
2014/06/07 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
给朋友的赠语
2015/06/23 职场文书
golang中的空slice案例
2021/04/27 Golang
golang 实现Location跳转方式
2021/05/02 Golang
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技