概述

　　近期由于产品快速原型开发的需要，不想用原声的方式开发App两端一起搞时间来不及，目前产品处于大量上feature的阶段，采用混合开发是最合适的选择，所以花了3天的时间研究怎么去实现移动端，拖拽，长按，读取手机相册并做本地预览。

　　想要实现的效果就是：

  1. 上传一张图片作为背景图片，能够在图片位置上打点相当于打tag　
  2. 在手机屏幕上长按在事件发生的中心位置创建一个tag
  3. 这个tag能够响应touch事件实现上下左右位置的移动

核心问题点：

  1. 手机端的触控实现方案实现，view移动时要动态改变元素的top和left并有回调函数方便接入业务逻辑
  2. 背景图上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触控，拖拽，长按, 滑屏 实现方案的更多相关文章

  1. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  2. Android 单指触控拖拽，两指触控缩放

    import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...

  3. Android H5混合开发（1）：构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  4. Android H5混合开发（5）：封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

  5. Android H5混合开发（2）：自定义Cordova插件

    前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...

  6. Android H5混合开发（3）：原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  7. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  8. 能挣钱的微信JSSDK+H5混合开发

    H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...

  9. Android H5混合开发（4）：构建Cordova Jar包

    前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...

随机推荐

  1. PowerShell使用ServicePrincipal登陆Azure

    一.打开PowerShell 二.输入下列命令 $pass = ConvertTo-SecureString "<这里换成您的AAD应用密钥>" -AsPlainTex ...

  2. Swift udp实现根据端口号监听广播数据（利用GCDAsyncUdpSocket实现）

    有个小需求,app需要监听pc广播的数据: 代码实现思路: 使用三方库:CocoaAsyncSocket 1.开启udp监听: udpSocket.beginReceiving() 2.读取udp的数 ...

  3. IntelliJ IDEA的配置优化

    IntelliJ IDEA的配置优化 我们安装完IntelliJ IDEA之后,在弹出的欢迎页面下方点击Configure,选择Setting,打开以下界面,我们在这个界面中进行配置. Appeara ...

  4. Maven使用详解，非常详细

    本文转:http://blog.csdn.net/u010425776/article/details/52027706 什么是Maven? 如今我们构建一个项目需要用到很多第三方的类库,如写一个使用 ...

  5. elasticsearch中 refresh 和flush区别【转】

    elasticsearch中有两个比较重要的操作:refresh 和 flush refresh操作 当我们向ES发送请求的时候,我们发现es貌似可以在我们发请求的同时进行搜索.而这个实时建索引并可以 ...

  6. MXNET：权重衰减

    权重衰减是应对过拟合问题的常用方法. \(L_2\)范数正则化 在深度学习中,我们常使用L2范数正则化,也就是在模型原先损失函数基础上添加L2范数惩罚项,从而得到训练所需要最小化的函数. L2范数惩罚 ...

  7. Java知多少（71）文件与目录管理

    目录是管理文件的特殊机制,同类文件保存在同一个目录下不仅可以简化文件管理,而且还可以提高工作效率.Java 语言在 java.io 包中定义了一个 File 类专门用来管理磁盘文件和目录. 每个 Fi ...

  8. CentOS重新加载网卡报错 Active connection path: /org/freedesktop/NetworkManager/ActiveConnection/23

    最新文章:Virson's Blog 重新加载网卡时出现的错误如下: [root@vdb1 dev]# service network restart Shutting down interface ...

  9. IP分片与重组详解

    大家对IP数据包头,应该不陌生吧 分片便是与图中圈出来的两个地址有关,本文也是将主要围绕他们展开. 那我们先来了解他们的概念. 标志一个三比特字段遵循与用于控制或识别片段.他们是(按顺序,从高分以低位 ...

  10. Ubuntu下CUDA8.0卸载

    Ubuntu下CUDA8.0卸载 https://www.jianshu.com/p/45e07114463a 由于目前CUDA9.0已经发布,很多朋友需要升级,而在升级前需要卸载CUDA8.0,方法 ...