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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
第五节--克隆
2006/11/16 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
js倒计时小程序
2013/11/05 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python中的装饰器详解
2015/04/13 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书