移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案
概述
近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽,长按,读取手机相册并做本地预览。
想要实现的效果就是:
- 上传一张图片作为背景图片,能够在图片位置上打点相当于打tag
- 在手机屏幕上长按在事件发生的中心位置创建一个tag
- 这个tag能够响应touch事件实现上下左右位置的移动
核心问题点:
- 手机端的触控实现方案实现,view移动时要动态改变元素的top和left并有回调函数方便接入业务逻辑
- 背景图上tag点位置的存储,动态获取element style 中 top 和 left 值通过记录这两个值实现定位及存
H5拖拽实现方案:draggable 与 touchpunch
由于之前简单了解过一些h5移动端开发和响应式前端的东西, 不算太陌生,我直接搜索了 jquery h5 dragable 结果是找到了jquery的draggable,https://jqueryui.com/draggable 但是这个库的话只支持鼠标事件在pc端ok但是移动端没法用,所以继续搜索在 github 一个问题 draggable don't support mobile 得知 touchpunch http://touchpunch.furf.com/ 这个库实现了鼠标事件到touch事件的适配,可以很好的
在移动端实现拖拽效果
touchpunch 的文档不是很多,只有简单的使用和介绍由于是适配的draggable所以事件和回调参数都是和draggable一样的详细的api文档在这里:
移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案的更多相关文章
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- Android 单指触控拖拽,两指触控缩放
import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...
- Android H5混合开发(1):构建Cordova 项目
Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...
- Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...
- Android H5混合开发(2):自定义Cordova插件
前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- H5混合开发问题总结
1.This application is modifying the autolayout engine from a background thread, which can lead to en ...
- 能挣钱的微信JSSDK+H5混合开发
H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...
- Android H5混合开发(4):构建Cordova Jar包
前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...
随机推荐
- textAngular字体依赖
textAngular部分按钮显示不正常, 对比后发现是少了字体css <link href="https://cdn.bootcss.com/font-awesome/4.7.0/c ...
- (亲测解决)每次打开excel文件都会出现两个窗口,一个是空白的sheet1,另一个是自己的文档
版权声明:本文为博主原创文章,转载请注明出处! https://blog.csdn.net/sinat_34104446/article/details/80210424 一.问题描述每次打开Exce ...
- 新课程网上选课系统V1.0—适用于中小学校本课程选课、选修课选课
学校要开设选修课,人工选课实施了两年,耗时耗力,于是打算用网上选课,在网上搜索了一番,没多少实用的,有一个网上用的比较多的,功能太简单了,于是打算自己开发一个,功能参考了部分学校的功能,也有基于Aja ...
- Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画
Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画 0.首先.先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式參考:http://www.jianshu.com/p/c0d7ad79 ...
- CucumberPeople 1.3.2 发布
CucumberPeople 网站: http://alterhu.github.io/CucumberPeople/ This eclipse plugin based on RubyMine ,a ...
- mysql数据库自增id重新从1排序的两种方法
mysql默认自增ID是从1开始了,但当我们如果有插入表或使用delete删除id之后ID就会不会从1开始了哦. 使用mysql时,通常表中会有一个自增的id字段,但当我们想将表中的数据清空重新添 ...
- 如何查看memcache的性能
memcache的运行状态可以方便的用 stats 命令显示.首先用telnet 127.0.0.1 11211这样的命令连接上memcache,然后直接输入stats就可以得到当前memcache的 ...
- Charles for Mac(HTTP 监视器和网络抓包工具)破解版安装
1.软件简介 Charles 是在 Mac.Linux 或 Windows 下常用的 http 协议网络包截取工具,在平常的测试与调式过程中,掌握此工具就基本可以不用其他抓包工具了.Charle ...
- ajax之async属性
Ajax请求中的async:false/true的作用 官方的解释是:http://api.jquery.com/jQuery.ajax/ async Boolean Default: true By ...
- Android UI系列-----RelativeLayout的相关属性
本篇随笔将主要记录一些RelatieLayout的相关属性,并将猜拳游戏通过RelativeLayout实现出来 RelativeLayout的几组属性 第一组属性:android:layout_be ...