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 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
React Native之TextInput组件解析示例
Aug 22 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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判断变量的函数
2012/04/24 PHP
浅析php学习的路线图
2013/07/10 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
用python代码做configure文件
2014/07/20 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python绘制地震散点图
2019/06/18 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
个人优缺点自我评价
2014/01/27 职场文书
医学生求职自荐书
2014/06/12 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
个人债务授权委托书
2014/10/17 职场文书
班级管理经验交流材料
2015/11/02 职场文书
班级班风口号大全
2015/12/25 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
python开发实时可视化仪表盘的示例
2021/05/07 Python