JS实现简单移动端鼠标拖拽


Posted in Javascript onJuly 23, 2020

本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下

<!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>
    #div {
      width: 100%;
      height: 200px;
      background: rosybrown;
    }
    #button {
      position: absolute;
    }
  </style>

</head>

<body>
  <div id="div">
    <button id="button">看我的魔法?挪??lt;/button>
  </div>
  <script>
    var button = document.getElementById('button')
    button.ontouchstart = function(e) {
      var startX = e.touches[0].clientX - this.offsetLeft;
      var startY = e.touches[0].clientY - this.offsetTop;
      this.ontouchmove = function(e) {
        button.style.left = e.touches[0].clientX - startX + 'px';
        button.style.top = e.touches[0].clientY - startY + 'px';        
      }
    }
    button.ontouchend = function() {
      button.ontouchmove = null;
    }
  </script>
</body>

</html>

更多精彩文章请点击专题: Javascript拖拽特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
You might like
php简单计算页面加载时间的方法
2015/06/19 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP最常用的正则表达式
2017/02/13 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
javascript制作2048游戏
2015/03/30 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
优秀女职工事迹材料
2014/02/06 职场文书
怎么写自荐书范文
2014/02/12 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
大一新生检讨书
2014/10/29 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
金砖之国观后感
2015/06/11 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers