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


Posted in Javascript onMarch 04, 2016

本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下

效果图:

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

实现代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
 <style>
  body {
  height: 2000px;
  }
  #block {
  width:200px;
  height:200px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
  }
 </style>
 </head>
 <body>
 <div>
  touchstart,touchmove,
  touchend,touchcancel
 </div>
 <div id="block"></div>
<script>
 // 获取节点
 var block = document.getElementById("block");
 var oW,oH;
 // 绑定touchstart事件
 block.addEventListener("touchstart", function(e) {
  console.log(e);
  var touches = e.touches[0];
  oW = touches.clientX - block.offsetLeft;
  oH = touches.clientY - block.offsetTop;
  //阻止页面的滑动默认事件
  document.addEventListener("touchmove",defaultEvent,false);
 },false)

 block.addEventListener("touchmove", function(e) {
  var touches = e.touches[0];
  var oLeft = touches.clientX - oW;
  var oTop = touches.clientY - oH;
  if(oLeft < 0) {
  oLeft = 0;
  }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
  oLeft = (document.documentElement.clientWidth - block.offsetWidth);
  }
  block.style.left = oLeft + "px";
  block.style.top = oTop + "px";
 },false);
 
 block.addEventListener("touchend",function() {
  document.removeEventListener("touchmove",defaultEvent,false);
 },false);
 function defaultEvent(e) {
  e.preventDefault();
 }
</script>
 </body>
</html>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js判断浏览器类型的方法
Aug 07 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
iframe实用操作锦集
Apr 22 Javascript
JS控制输入框内字符串长度
May 21 Javascript
Prototype框架详解
Nov 25 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
基于vue.js实现的分页
Mar 13 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php中异常处理方法小结
2015/01/09 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP函数积累总结
2019/03/19 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python实现类继承实例
2014/07/04 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python单例模式实例分析
2015/04/08 Python
Python的Django框架中的Context使用
2015/07/15 Python
python删除特定文件的方法
2015/07/30 Python
pandas的qcut()方法详解
2019/07/06 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python将音频进行变速的操作方法
2020/04/08 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
如何写出好的Java代码
2014/04/25 面试题
工程开工庆典邀请函
2014/02/01 职场文书
和解协议书
2014/04/16 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
酒会开场白大全
2015/06/01 职场文书
安全生产学习心得体会
2016/01/18 职场文书