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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
PHP新手上路(九)
2006/10/09 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js调用css属性写法
2013/09/21 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
JsChart组件使用详解
2018/03/04 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
浅析Python四种数据类型
2018/09/26 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
学习新党章思想汇报
2014/01/09 职场文书
个人合作协议书范本
2014/04/18 职场文书
卫生系统先进事迹
2014/05/13 职场文书
教师自我剖析材料
2014/09/29 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
幼儿园大班教师评语
2019/06/21 职场文书