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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
javascript中的delete使用详解
Apr 11 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
js中实现继承的五种方法
Jan 25 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
小程序组件传值和引入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 has encountered a Stack overflow问题解决方法
2014/11/03 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python flask实现分页的示例代码
2018/08/02 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
《颐和园》教学反思
2014/02/26 职场文书
领导接待方案
2014/03/13 职场文书
防火标语大全
2014/10/06 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年化验室工作总结
2015/04/23 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
千万级用户系统SQL调优实战分享
2022/03/03 MySQL