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 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
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 curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php 函数中使用static的说明
2012/06/01 PHP
解析php中的escape函数
2013/06/29 PHP
php curl 上传文件代码实例
2015/04/27 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue组件name的作用小结
2018/05/23 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python跳出多重循环的方法示例
2019/07/03 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python 求10个数的平均数实例
2019/12/16 Python
Python虚拟环境venv用法详解
2020/05/25 Python
解决python运行效率不高的问题
2020/07/20 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
如何客观的进行自我评价
2013/12/17 职场文书
人力资源总监工作说明
2014/03/03 职场文书
年会邀请函范文
2015/01/30 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书