概述

　　近期由于产品快速原型开发的需要，不想用原声的方式开发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. Linux 下Tomcat配置远程访问管理端

    1:修改Tomcat默认端口号,将默认的8080修改为8081 apache-tomcat-8.5.31\conf\server.xml <Connector port="8081&q ...

  2. tmux 共享窗口大小

    http://www.cnblogs.com/bamanzi/p/tmux-share-windows-between-sessions.html

  3. C# 重启exe

    休夸此地分天下 c# 关闭和重启.exe程序 Process[] myprocess = Process.GetProcessesByName("a"); )//判断如果存在 { ...

  4. android的左右滑动效果实现-ViewFlipper

    说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等.实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4. ...

  5. 配置Django

    第一步,安装Python,在这里下载,如果你安装在C:\Python27, 把C:\Python27;C:\Python27\Scripts;C:\Python27\Lib 加到你的Path 第二步: ...

  6. 【css】css 中文字体 unicode 对照表

    css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...

  7. R语言中的横向数据合并merge及纵向数据合并rbind的使用

    R语言中的横向数据合并merge及纵向数据合并rbind的使用 我们经常会遇到两个数据框拥有相同的时间或观测值,但这些列却不尽相同.处理的办法就是使用merge(x, y ,by.x = ,by.y ...

  8. eBGP&iBGP 总结

    3.4 BGP 原文地址:http://mp.weixin.qq.com/s?src=3&timestamp=1500043305&ver=1&signature=XwiIVV ...

  9. Oracle DBA神器之Toad

    很早就听说Toad功能很强大,一直没有使用过,因为PLSQL Developer就很好用.前几天看见同事优化Oracle就是用的Toad,有一些很强大的管理功能,于是再一次对Toad产生兴趣,收集了一 ...

  10. Spark学习笔记——读写Hbase

    1.首先在Hbase中建立一张表,名字为student 参考 Hbase学习笔记——基本CRUD操作 一个cell的值,取决于Row,Column family,Column Qualifier和Ti ...