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 自动完成脚本整理(33个)
Oct 20 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 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
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
java script编程起步(第三课)
2007/01/10 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
Python实现购物车购物小程序
2018/04/18 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python实现静态服务器
2019/09/05 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
如何让python的运行速度得到提升
2020/07/08 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书