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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
javascript连续赋值问题
Jul 08 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
javascript触发模拟鼠标点击事件
Jun 26 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
递归列出所有文件和目录
2006/10/09 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
javascript history对象详解
2017/02/09 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python3模拟登录操作实例分析
2019/03/12 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python中的unittest框架实例详解
2021/02/05 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
物流专员岗位职责
2014/02/17 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript