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 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
微信小程序分享海报生成的实现方法
Dec 10 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
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
解析php中获取系统信息的方法
2013/06/25 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python中的默认参数实例分析
2018/01/29 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python批量修改交换机密码的示例
2020/09/22 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
回门宴新郎答谢词
2014/01/12 职场文书
2014年平安夜寄语
2014/12/08 职场文书
后进生评语大全
2015/01/04 职场文书
财务统计员岗位职责
2015/04/14 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL