$('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. MBCS与Unicode的转换

    一.绪 其实刚开始编程的时候我不太喜欢用Unicode编码,所以比较喜欢 VC6.0,即使使用VS2010,也会设置为未设置模式. 后来,没办法的接触了些Unicode的编程的东西,必须得研究字符集的 ...

  2. python read file(f,csv)

    import csv def readfile0(): print('test read file') in_file = open('C:\python\demo\LiaoXueFeng\data\ ...

  3. 1:(0or1)

    public class User    {       public int ID { get; set; }       public string UserName { get; set; } ...

  4. [转]Oracle存储过程给变量赋值的方法

    原文地址:http://blog.csdn.net/drbing/article/details/51821262 截止到目前我发现有三种方法可以在存储过程中给变量进行赋值:1.直接法     :=  ...

  5. Instant Django 1.5 Application Development Starter

    Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic d ...

  6. ubi 文件系统加载失败原因记录

    尝试升级 kernel 到 4.4.12版本,然后出现 kernel 加载 ubi 文件系统失败的现象,现象如下 [ 3.152220] ubi0 error: vtbl_check: too lar ...

  7. 使用 Easy Sysprep v4(ES4) 封装 Windows 7教程

      总:1.装系统ctrl+shift+f3(administrator)2.备份系统,快速备份(pe下)3.安装补丁,软件(系统下),不装安全类软件,需激活的软件重装后还要激活4.系统备份(pe下叠 ...

  8. mac使用nvm安装node进行多版本管理

    安装 $ git clone https://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh vi ~/.bash_profil ...

  9. sql 表连接基本的语法

    SQL连接能够分为内连接.外连接.交叉连接. 1.内连接:内连接查询操作列出与连接条件匹配的数据行,它使用比較运算符比較被连接列的列值. 1.1 select * from Table1 as a, ...

  10. 关于div一侧固定,另一侧自适应

    关于div一侧固定,另一侧自适应,从文字看出 一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...