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 15 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue常用高阶函数及综合实例
Feb 25 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
基于mysql的bbs设计(二)
2006/10/09 PHP
linux中cd命令使用详解
2015/01/08 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
《阳光》教学反思
2014/02/23 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
卖房授权委托书样本
2014/10/05 职场文书
打架检讨书范文
2015/01/27 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python