移动端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 ...
随机推荐
- .NET 11 个 Visual Studio 代码性能分析工具
原文地址 软件开发中的性能优化对程序员来说是一个非常重要的问题.一个小问题可能成为一个大的系统的瓶颈.但是对于程序员来说,通过自身去优化代码是十分困难的.幸运的是,有一些非常棒的工具可以帮助程序员进行 ...
- Ubuntu上安装git和创建工作区和提交文件!!!
1.安装git: sudo apt-get install git 2.创建工作区: 创建一个文件夹,sudo mkdir 文件文件夹.告诉git这是个工作区文件夹,sudo git init 文件夹 ...
- Data Structure Visualizations
https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
- PC端和移动端在前端开发上的一些区别,前端里移动端到底比pc端多哪些知识
(1)———————— 前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别: ( ...
- TurboCAD Pro for Mac(二维绘图和三维建模工具)破解版安装
1.软件简介 TurboCAD Pro 是 macOS 系统上一款二维绘图和三维建模工具,具备强大的绘图和设计特性,加上强大的创建复杂的三维模型的工具,三维 OpenGL 的渲染,和超过 11, ...
- Socket网络编程--小小网盘程序(2)
这一节将不会介绍太多的技术的问题,这节主要是搭建一个小小的框架,为了方便接下来的继续编写扩展程序.本次会在上一小节的基础上加上一个身份验证的功能. 因为网盘程序不像聊天程序,网盘是属于主动向服务器拉取 ...
- Egret里用矢量挖圆形的洞
项目里需要用到,但是不是用在新手引导上,下面的代码可以绘制一个圆的四分之一,用四个即可拼出一个圆. private createShape(): egret.Shape { let magicNum ...
- 【Tomcat】Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析
这个分为两个部分的系列文章研究了 Apache Tomcat 服务器的系统架构以及其运用的很多经典设计模式.第 1 部分 分析了 Tomcat 的工作原理,第 2 部分将分析 Tomcat 中运用的许 ...
- HDOJ 1393 Weird Clock(明确题意就简单了)
Problem Description A weird clock marked from 0 to 59 has only a minute hand. It won't move until a ...
- 【iCore1S 双核心板_FPGA】例程十六:基于SPI的ARM与FPGA通信实验
实验现象: 核心代码: int main(void) { int i,n; ]; ]; HAL_Init(); system_clock.initialize(); led.initialize(); ...