JavaScript实现移动端拖动元素


Posted in Javascript onNovember 24, 2020

本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码,供大家参考,具体内容如下

实现效果:

JavaScript实现移动端拖动元素

请切换到移动端页面查看!

JavaScript实现移动端拖动元素

代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: #1cee89;
    }
    
    div {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #8294ff;
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    var startX = 0; // 获取手指初始坐标
    var startY = 0;
    var x = 0; // 获得盒子原来的位置
    var y = 0;
    // 手指触摸
    div.addEventListener('touchstart', function(e) {
      // 获取手指初始坐标
      startX = e.targetTouches[0].pageX;
      startY = e.targetTouches[0].pageY;
      x = this.offsetLeft;
      y = this.offsetTop;
      this.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
    });
    // 手指离开
    div.addEventListener('touchend', function(e) {
      this.style.boxShadow = '';
    });

    // 手指按住移动
    div.addEventListener('touchmove', function(e) {
      // 计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
      var moveX = e.targetTouches[0].pageX - startX;
      var moveY = e.targetTouches[0].pageY - startY;
      // 移动盒子 盒子原来的位置 + 手指移动的距离
      this.style.left = x + moveX + 'px';
      this.style.top = y + moveY + 'px';
      e.preventDefault(); // 阻止屏幕滚动的默认行为
    });
  </script>
</body>

</html>

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

Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 #Javascript
js实现抽奖功能
Nov 24 #Javascript
前端 javascript 实现文件下载的示例
Nov 24 #Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 #Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
You might like
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
Python文件的读写和异常代码示例
2017/10/31 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
竞选班长演讲稿500字
2014/08/22 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年化验室工作总结
2014/11/21 职场文书
给上级领导的感谢信
2015/01/22 职场文书
通用员工手册范本
2015/05/14 职场文书
法律意见书范文
2015/05/20 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP