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");
                                }
                            }]
                        );
                        });
时间: 2025-01-02 19:18:50

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

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

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS

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

简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript <p draggable="true" ondragstart="myFunction(event)">拖动我!</p> 提示: 链接和图片默认是可拖动的,不需要 draggable 属性. 定义和用法 在拖放的过程中会触发以下事件:

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

[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一篇文章中也有提及到dataTransfer对象,那会只是想通过dataTransfer对象来将被拖拽元素的id进行传递,使得目标元素可以通过相应的dataTransfer对象来获取id进行对应操作. 成员表 属性 描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. effect

HTML5 拖放(Drag 和 Drop)

一.定义 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动.Safari 5.1.2不支持拖动 二.使用 设置元素为可拖放:为了使元素可拖动,把 draggable 属性设置为 true 拖动什么 :ondragstart 和 setData( ),其中ondragstart 它规定了被拖动的数据.setData(

HTML5移动开发之路(38)——jqMobi插件ActionSheet

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(38)--jqMobi插件ActionSheet 现在在手机客户端上Action Sheet非常常见,比如微信中的分享按钮菜单,下面我们使用jqMobi实现一个Action Sheet,如下: 首先右击上面的按钮选择审查元素(我用的是Chrome浏览器,先按F12) [html] view plain copy print? <a class="button" onclick="s

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的

HTML 学习笔记 (drag &amp; drop)

拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseove.Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置,而现在html5原生的Drag &Drop事件(DnD),方便了许多,而且性能也有了提高. 如何使对象能够被拖动 为了使元素能够被拖动 需把要拖动元素的draggable 属性设置为true. <img src="../

我的HTML5

今天学了HTML5,先学习了基础的标签header,footer,section,time,aside,article等,还学习了下拉列表: <input list="one"/><datalist id="one">    <option value="one">    <option value="two">    <option value="three&q

HTML5与移动端Web

概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 video 和 audio 元素 用于定位的 Geolocation API 本地存储以及离线应用 Web Workers.Web WebSocket API 移动前端开发可分为: 手机网页开发.这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webki