HTML5 touche vents drag to move & AF actionsheet by longTap
$('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的更多相关文章
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- HTML5 拖放(Drag 和 Drop)详解与实例
简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...
- HTML5 拖放(Drag 和 Drop)详解与实例(转)
公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5拖放(drag and drop)与plupload的懒人上传
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...
- HTML5 拖放(Drag 和 Drop)
拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. <!DOCTYPE HTML> <html> <hea ...
- HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象
[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
- [Selenium] WebDriver 操作 HTML5 中的 drag/drop
以 jQuery UI 官方网站元素测试,地址:http://jqueryui.com/draggable/ 示例: package com.learningselenium.html5; impor ...
随机推荐
- 2. EM算法-原理详解
1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 概率 ...
- mongo源码学习(二)db.cpp之mongoDbMain方法分析
mongo后台进程的入口:mongo/src/mongo/db/dbmain.cpp,wmain(for windows)和main函数,main函数也很简单,就是委托给db.cpp中的mongoDb ...
- PostgreSQL存储过程<转>
原创文章,转载请务必将下面这段话置于文章开头处(保留超链接).本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/12/27/SQL4_存储过程_St ...
- [转]MS SQL Server 数据库连接字符串详解
http://blog.csdn.net/jackiehome/article/details/8668121 问题 : 超时时间已到.在从池中获取连接之前超时时间已过.出现这种情况可能是因为所有池连 ...
- python List的一些相关操作
把一些基础的东西归类整理,作记录. 添加元素 a=[7,8,9,10] a.append('a') #在最后位置添加 a.insert(1,'b') #在指定位置添加 删除元素 del a[1 ...
- gclient多源码管理工具 DEPS文件
gclient来管理源码的checkout, update等. gclient是google专门为这种多源项目编写的脚本,它可以将多个源码管理系统中的代码放在一起管理.甚至包括将Git和svn代码放在 ...
- VS2008中设置字体大小和添加显示行号
1.字体设置 菜单->工具->选项->环境->字体和颜色 在字体那一栏可以选字体,VC6.0默认的字体是Fixedsys,字体大小你可以设为12,就与VC6.0的一样的字体了. ...
- APICloud 真机连接失败
今天在公司将APICloud 的项目进行趁机测试的时候,发现连接失败,报如下错: 排查步骤: 1.看手机wifi与电脑是否在同一网段: 就是看ip前面的三段是不是一样.比如ip地址是 192.168. ...
- FPGA内部动态可重置PLL讲解(二)
对于全局时钟的管理,涉及到关于亚稳态的知识,大家可以上网搜索相关资料,这里不再赘述.亚稳态最简单的理解形式是无法判断是处于高电平状态还是处于低电平状态,这样会导致整个系统不稳定,会出现逻辑上的错误. ...
- Python模拟Linux的Crontab, 写个任务计划需求
Python模拟Linux的Crontab, 写个任务计划需求 来具体点 需求: 执行一个程序, 程序一直是运行状态, 这里假设是一个函数 当程序运行30s的时候, 需要终止程序, 可以用python ...