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的横向滚动条(滑动条)
Feb 24 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
微信小程序实现天气预报功能
Jul 18 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Vue.js实现立体计算器
Feb 22 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
DISCUZ 分页代码
2007/01/02 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
实习生自我鉴定
2013/12/12 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
小学捐书活动总结
2014/07/05 职场文书
代领毕业证委托书
2014/08/02 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
安徽导游词
2015/02/12 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
师范生教育见习总结
2015/06/23 职场文书
分享几种python 变量合并方法
2022/03/20 Python