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实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Django实现组合搜索的方法示例
2018/01/23 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
python 模拟登陆163邮箱
2020/12/15 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
办公室主任个人总结
2015/02/28 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
安全第一课观后感
2015/06/18 职场文书