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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php Smarty 字符比较代码
2011/02/27 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python re模块的高级用法详解
2018/06/06 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
大数据分析用java还是Python
2020/07/06 Python
优秀经理事迹材料
2014/02/01 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
青春雷锋观后感
2015/06/10 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis