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 ...
随机推荐
- Facebook的Fairseq模型详解(Convolutional Sequence to Sequence Learning)
1. 前言 近年来,NLP领域发展迅速,而机器翻译是其中比较成功的一个应用,自从2016年谷歌宣布新一代谷歌翻译系统上线,神经机器翻译(NMT,neural machine translation)就 ...
- Maven 本地打war包
Maven是个很好用的管理工具,不经能够管理jar,还能实现打包. 这里讲解Maven 本地打包,服务器打包,可以全部交给jenkins去完成的. 用Maven打包,先在eclipse装Maven插件 ...
- 微服务之springCloud和docker-provide(二)
简介 通过上一节我们已经通过docker-compose在swarm中部署了有三个实例的高可用eureka服务注册中心,本节我们讨论一下,怎么在创建一个spring cloud生产者,并用docker ...
- Android View.MeasureSpec
有时,Android系统控件无法满足我们的需求,因此有必要自定义View. 一般来说,自定义控件都会去重写View的onMeasure方法,因为该方法指定该控件在屏幕上的大小,[protected v ...
- Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现
Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现 2015-03-10 22:38 28419人阅读 评论(17) 收藏 举报 分类: Android ...
- 轻量级ORM框架Dapper应用八:使用Dapper实现DTO
一.什么是DTO 先来看看百度百科的解释: 数据传输对象(DTO)(Data Transfer Object),是一种设计模式之间传输数据的软件应用系统.数据传输目标往往是数据访问对象从数据库中检索数 ...
- Graph-DFS-图的深度优先遍历
#include <iostream> using namespace std; /* 5 5 1 2 1 3 1 5 2 4 3 5 1 2 4 3 5 ---------------- ...
- tf变换(1)
TF库的目的是实现系统中任一个点在所有坐标系之间的坐标变换,也就是说,只要给定一个坐标系下的一个点的坐标,就能获得这个点在其他坐标系的坐标. 使用tf功能包,a. 监听tf变换: 接收并缓存系统中发布 ...
- [redis] redis连接远程客户端查询数据
F:cd redis-2.8.12redis-cli.exe -h 192.168.6.107 -p 16680redis-cli.exe -h 192.168.6.107 -p 16681redis ...
- 【Html】Vue动态插入组件
html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...