$('img').on("touchstart",function(E){
//E.preventDefault();E.stopPropagation();
var el=this;var me=$(this);$("#tip").text("in touchstart");
var t=E.touches[0];
console.log("touchstart!,mx,my=(",t.pageX,",",t.pageY,") ,el.x,y=(",el.offsetLeft,",",el.offsetTop,")" );
me.data("mx",t.pageX);me.data("my",t.pageY);
me.data("ex",el.offsetLeft);me.data("ey",el.offsetTop); })
.on('touchmove',function(E){E.preventDefault();E.stopPropagation();
console.log("touchmove");var el=this;var me=$(this);
var t=E.touches[0];
var mx=parseInt(me.data("mx")),my=parseInt(me.data("my"));
var ex=parseInt(me.data("ex")),ey=parseInt(me.data("ey"));
console.log("or mx,my, new mx,my or ex,ey=",mx,my,t.pageX,t.pageY,ex,ey)
var nx=ex+t.pageX - mx , ny=ey+t.pageY-my
console.log("dest x,y=",nx,",",ny)
$("#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);
me.css({"left":nx+"px","top":ny+"px"}) ; })
.on('touchend',function(E){
//E.preventDefault();E.stopPropagation();
console.log('touchend');var el=this;var me=$(this);
}); $('img').on('longTap',function(){$.ui.actionsheet(
[{
text: 'back',
cssClasses: 'red',
handler: function () {
alert("Clicked Back")
}
}, {
text: 'Alert Hi',
cssClasses: 'blue',
handler: function () {
alert("Hi");
}
}, {
text: 'Alert Goodbye',
cssClasses: '',
handler: function () {
alert("Goodbye");
}
}]
);
});

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. 基于ELK和Python搭建简单的监控告警系统

    Reference: https://www.jianshu.com/p/67e358dc065d 在做完支付系统后,我搭建了两套监控系统. 一套是点评的CAT,主要用于代码级的实时统计和历史统计以及 ...

  2. ZooKeeper管理分布式环境中的数据

    Reference: http://www.cnblogs.com/wuxl360/p/5817549.html 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它 ...

  3. Maven 统一指定jar包版本的方法

    在看别人的源码的过程中,会遇到这种情况,就是很多jar包没有指定版本,却能够下载下来. 在后来的研究中发现,有这样一个配置. <parent> <groupId>org.spr ...

  4. [转]收藏的Extjs 多表头插件GroupHeaderGrid

    本文转载自chy2z<收藏的Extjs 多表头插件GroupHeaderGrid> 效果图: 是不是非常酷啊! js 代码: Ext.namespace("Ext.tet.plu ...

  5. 图解在VC里使用graphics.h画图(相似TC)

    1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图: 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> ...

  6. java中的设计模式一 装饰模式

    1.装饰模式(Decorator)的定义:又名包装(Wrapper)模式,装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 2.装饰模式以对客户端透明的方式动态的给一个对象附加上 ...

  7. java你可能不知道的事(2)--堆和栈<转>

    在java语言的学习和使用当中你可能已经了解或者知道堆和栈,但是你可能没有完全的理解它们.今天我们就一起来学习堆.栈的特点以及它们的区别.认识了这个之后,你可能对java有更深的理解. Java堆内存 ...

  8. linux进程管理(四)

    [教程主题]:进程管理 [1]进程介绍 程序和进程 程序是为了完成某种任务而设计的软件,比如OpenOffice是程序.什么是进程呢?进程就是运行中的程序. 一个运行着的程序,可能有多个进程. 比如自 ...

  9. background-size 导致的背景不居中问题

    1. 理想中的效果是这样的   2. 然后想改一下圆圈的大小   3. 容器大小为偶数,图片大小为奇数,就会使图片并不真正居中,如果仔细量一下,会发现图片上面比下面多1px! 貌似只有 backgro ...

  10. 如何在ROS中使用PCL(2)

    记录关于我们运行roslaunch openni_launch openni.launch  命令时生成的话题以及这些话题的数据类型便于后期的处理,只有知道它们的数据结构,才能很好的对数据进行处理,我 ...