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获取选中的文本的方法代码
Oct 30 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
javaScript基础语法介绍
Feb 28 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
javascript正则表达式总结
Feb 29 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js中!和!!的区别与用法
May 09 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面试题 试试看看你会不会也中招
2014/08/19 PHP
web css实现整站样式互相切换
2013/10/29 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python实现视频分帧效果
2019/05/31 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
"火柴棍式"程序员面试题
2014/03/16 面试题
自我鉴定注意事项
2014/01/19 职场文书
安全演讲稿大全
2014/05/09 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
个人务虚会发言材料
2014/10/20 职场文书
升职自荐信怎么写
2015/03/05 职场文书
小学运动会前导词
2015/07/20 职场文书
房产遗嘱范本
2015/08/06 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python