javascript实现移动端触屏拖拽功能


Posted in Javascript onJuly 29, 2020

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

HTML:

<body>
   <div id="div1">
   </div>
</body>

CSS:

<style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    html,body {
      width: 100%;
      height:100%;
    }
    #div1 {
      width: 50px;
      height: 50px;
      background: cyan;
      position: absolute;
    }
</style>

JS:

<script type="text/javascript">
     var div1=document.querySelector('#div1');
     var maxW=document.body.clientWidth-div1.offsetWidth;
     var maxH=document.body.clientHeight-div1.offsetHeight;
 
  div1.addEventListener('touchstart',function(e){
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    oL = touch.clientX - div1.offsetLeft;
    oT = touch.clientY - div1.offsetTop;
    document.addEventListener("touchmove",defaultEvent,false);
  })
 
 
  div1.addEventListener('touchmove',function(e){
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    var oLeft = touch.clientX - oL;
    var oTop = touch.clientY - oT;
    if(oLeft<0){
      oLeft=0;
    }else if (oLeft>=maxW) {
      oLeft=maxW;
    }
    if(oTop<0){
      oTop=0;
    }else if (oTop>=maxH) {
      oTop=maxH;
    }
 
    div1.style.left = oLeft + 'px';
    div1.style.top = oTop + 'px';
 
  })
  div1.addEventListener('touchend',function(){ 
    document.removeEventListener("touchmove",defaultEvent);
  })
  function defaultEvent(e) {
 
 
    e.preventDefault();
   }
</script>

说明 :

maxW:div1可移动的最大宽度
maxH:div1可移动的最大高度
oL、oT:鼠标所点位置的坐标

效果:

javascript实现移动端触屏拖拽功能

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

Javascript 相关文章推荐
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
图解JavaScript中的this关键字
May 28 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 #Javascript
JavaScript编写开发动态时钟
Jul 29 #Javascript
js编写简易的计算器
Jul 29 #Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
You might like
php检测图片主要颜色的方法
2015/07/01 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
html读出文本文件内容
2007/01/22 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js同源策略详解
2015/05/21 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
Javascript复制实例详解
2016/01/28 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue分页器组件编写方法详解
2019/06/28 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python简单线程和协程学习心得(分享)
2017/06/14 Python
python使用tkinter实现简单计算器
2018/01/30 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
会计专业推荐信
2013/10/29 职场文书
中专生的个人自我评价
2013/12/11 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
个人评语大全
2014/05/04 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
拆迁委托协议书
2014/09/15 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
律师函格式范本
2015/05/27 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS