1. $('img').on("touchstart",function(E){
  2. //E.preventDefault();E.stopPropagation();
  3. var el=this;var me=$(this);$("#tip").text("in touchstart");
  4. var t=E.touches[0];
  5. console.log("touchstart!,mx,my=(",t.pageX,",",t.pageY,") ,el.x,y=(",el.offsetLeft,",",el.offsetTop,")" );
  6. me.data("mx",t.pageX);me.data("my",t.pageY);
  7. me.data("ex",el.offsetLeft);me.data("ey",el.offsetTop);
  8.  
  9. })
  10. .on('touchmove',function(E){E.preventDefault();E.stopPropagation();
  11. console.log("touchmove");var el=this;var me=$(this);
  12. var t=E.touches[0];
  13. var mx=parseInt(me.data("mx")),my=parseInt(me.data("my"));
  14. var ex=parseInt(me.data("ex")),ey=parseInt(me.data("ey"));
  15. console.log("or mx,my, new mx,my or ex,ey=",mx,my,t.pageX,t.pageY,ex,ey)
  16. var nx=ex+t.pageX - mx , ny=ey+t.pageY-my
  17. console.log("dest x,y=",nx,",",ny)
  18. $("#tip").text("in touch move : "+"or mx,my, new mx,my or ex,ey="+mx+","+my+","+t.pageX+","+t.pageY+","+ex+","+ey+" dest x,y="+nx+","+ny);
  19. me.css({"left":nx+"px","top":ny+"px"}) ;
  20.  
  21. })
  22. .on('touchend',function(E){
  23. //E.preventDefault();E.stopPropagation();
  24. console.log('touchend');var el=this;var me=$(this);
  25. });
  26.  
  27. $('img').on('longTap',function(){$.ui.actionsheet(
  28. [{
  29. text: 'back',
  30. cssClasses: 'red',
  31. handler: function () {
  32. alert("Clicked Back")
  33. }
  34. }, {
  35. text: 'Alert Hi',
  36. cssClasses: 'blue',
  37. handler: function () {
  38. alert("Hi");
  39. }
  40. }, {
  41. text: 'Alert Goodbye',
  42. cssClasses: '',
  43. handler: function () {
  44. alert("Goodbye");
  45. }
  46. }]
  47. );
  48. });

HTML5 touche vents drag to move & AF actionsheet by longTap的更多相关文章

  1. HTML5 拖放(Drag 和 Drop)功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  2. HTML5 拖放(Drag 和 Drop)详解与实例

    简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...

  3. HTML5 拖放(Drag 和 Drop)详解与实例(转)

    公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...

  4. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  5. HTML5拖放(drag and drop)与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  6. HTML5 拖放(Drag 和 Drop)

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. <!DOCTYPE HTML> <html> <hea ...

  7. HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象

    [前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...

  8. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

  9. [Selenium] WebDriver 操作 HTML5 中的 drag/drop

    以 jQuery UI 官方网站元素测试,地址:http://jqueryui.com/draggable/ 示例: package com.learningselenium.html5; impor ...

随机推荐

  1. 百度BAE使用ueditor 上传图片

    研究BAE 也有一段时间了,但一直无法解决BAE 上传图片的问题. 在阅读了 http://blog.csdn.net/auver/article/details/10103789 和 http:// ...

  2. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  3. 审计一波appcms-持续更新。

    废话 看到土司大牛都在审计,作为彩笔也要审计下去.该文章置顶持续更新.大家有啥可以评论区交流. 先对其目录进行分析 -admin/ #后台文件 - - -cache/ #缓存目录 -core/ #核心 ...

  4. ado ole方式访问access的两种方式

    OleDbConnection Connection = new OleDbConnection(); OleDbDataAdapter adapter = null; //ConnectiongSt ...

  5. <低风险投资之路>读书笔记

    书在这里 低风险才能高收益 大的投资收益回撤,是长期高复合收益率的最大杀手 要赚钱先不赔钱 选择合理的投资组合与合理的仓位 盈利的关键不是你买了什么,而是你买了多少.这就是仓位管理的技巧,在确定性盈利 ...

  6. sc58x config

    addip=set bootargs ${bootargs} ip=${ipaddr}:${serverip}:${gatewayip}:${netmask}:${hostname}:eth0:off ...

  7. Linxu 安装Nignx

    http://www.myhack58.com/Article/sort099/sort0102/2014/44894.htm 1.为了追加 nginx 的 yum 仓库,需要创建一个文件 /etc/ ...

  8. win10开始菜单打不开,右下角时间点不开等问题

    服务--“User Manager",启动后,重启桌面进程

  9. Linux排序命令sort详解

    语法格式sort [ -A ] [ -b ] [ -c ] [ -d ] [ -f ] [ -i ] [ -m] [ -n ] [ -r ] [ -u ] [ -o OutFile ][ -t Cha ...

  10. C51寄存器

    EA   全局中断允许位 ET2 定时器/计时器2中断允许位 ES 串行口中断允许位 ET1 定时器/计时器1中断允许位 EX1 外部中断1中断允许位 ET0 定时器/计时器0中断允许位 EX0 外部 ...