js实现适配移动端的拖动效果


Posted in Javascript onJanuary 13, 2020

本文实例为大家分享了js实现适配移动端的拖动效果,供大家参考,具体内容如下

1.html

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

2.js

var flag = false;
var cur = {
 x: 0,
 y: 0
 }
 var nx, ny, dx, dy, x, y;
 
 function down() {
 flag = true;
 var touch;
 if(event.touches) {
 touch = event.touches[0];
  } else {
  touch = event;
 }
 cur.x = touch.clientX;
 cur.y = touch.clientY;
 dx = div2.offsetLeft;
 dy = div2.offsetTop;
 }
 
 function move() {
 if(flag) {
  var touch;
  if(event.touches) {
  touch = event.touches[0];
  } else {
  touch = event;
  }
  nx = touch.clientX - cur.x;
  ny = touch.clientY - cur.y;
  x = dx + nx;
  y = dy + ny;
  div2.style.left = x + "px";
  div2.style.top = y + "px";
  //阻止页面的滑动默认事件
  document.addEventListener("touchmove", function() {
  event.preventDefault();
  }, false);
 }
 }
 //鼠标释放时候的函数
 function end() {
 flag = false;
 }
 var div2 = document.getElementById("div2");
 div2.addEventListener("mousedown", function() {
 down();
 }, false);
 div2.addEventListener("touchstart", function() {
 down();
 }, false)
 div2.addEventListener("mousemove", function() {
 move();
 }, false);
 div2.addEventListener("touchmove", function() {
 move();
 }, false)
 document.body.addEventListener("mouseup", function() {
 end();
 }, false);
 div2.addEventListener("touchend", function() {
 end();
}, false);

效果:

js实现适配移动端的拖动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的代码实现jquery定时器
Jan 03 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
javascript常用的方法整理
Aug 20 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
three.js 入门案例详解
2018/01/23 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
本科毕业生自我鉴定
2013/11/02 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
十八届三中全会感言
2014/03/10 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年宣传工作总结
2015/04/08 职场文书
老干部座谈会主持词
2015/07/03 职场文书
关于五一放假的通知
2015/08/18 职场文书
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL