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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JS实现验证码倒计时的注册页面
Jan 02 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
python中list循环语句用法实例
2014/11/10 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
10张动图学会python循环与递归问题
2021/02/06 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
关于Assembly命名空间的三个面试题
2015/07/23 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
房地产财务管理制度
2014/02/02 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
个人培训总结
2015/03/05 职场文书
经费申请报告范文
2015/05/18 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
用Python爬取某乎手机APP数据
2021/06/15 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python