概述

　　近期由于产品快速原型开发的需要，不想用原声的方式开发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. 在SpringBoot中使用热部署（DevTools）

    一.简介 有时候我们开发完SpringBoot项目后,启动运行.但是经常发现代码需要反复修改,然后修改部分内容后需要再启动....这样太费时了,热部署就是用来解决这一问题.让你修改完代码后,能自动执行 ...

  2. zabbix 中文乱码的处理

    一.乱码原因 查看cpu负载,中文乱码如下 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字库加上即可 二.解决zabbix乱码方法 2.1 上传字体文件到zabbix中 找到本地 ...

  3. 解决Ubuntu Chrome浏览器很卡不响应的问题

    1. 设定字体,使用Ubuntu Tweak Tool把系统字体设定为默认字体,而不是文泉驿字体: 2. 使用ADBLock Plus把垃圾的广告过滤掉,不然网页上很多Flash就会导致网页非常的卡顿 ...

  4. 为Docker容器设置http代理

    以下内容复制自:传送门 ,可以直接去该地址查看. HTTP/HTTPS proxy The Docker daemon uses the HTTP_PROXY, HTTPS_PROXY, and NO ...

  5. Jenkins常用插件

    Generic Webhook Trigger Plugin触发器webhook用户触发构建 Deploy to container Plugin部署到tomcat Gradle Plugin Gra ...

  6. WinDbg下载符号文件

    设置添加系统环境变量_NT_SYMBOL_PATH 的值为:srv*c:\symbols*http://msdl.microsoft.com/download/symbols 这样启动WinDbg的时 ...

  7. ant+svn+tomcat实现自动构建

    前段时间用做了一个简单的web api服务,在调试的过程中感觉到手动发布实在是效率低而且容易出错,于是花点时间搞了一下ant+svn+tomcat的自动构建,效果不错,今天拿出来分享一下. 准备工作 ...

  8. [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 1

     我的文章一定要做到对读者负责,否则就是失败的文章  ---------   www.ayjs.net    aaronyang技术分享 欢迎大家支持我的力作<[Aaronyang] 写给自己的 ...

  9. golang ---tcmalloc浅析

    总体结构 在tcmalloc内存管理的体系之中,一共有三个层次:ThreadCache.CentralCache.PageHeap,如上图所示.分配内存和释放内存的时候都是按从前到后的顺序,在各个层次 ...

  10. 获取应用程序根目录物理路径（Web and Windows）

    这两个计划写一个小类库,需要在不同项目下任意调用.该类库需要对磁盘文件进行读写,所以就需要获取程序执行的磁盘路径,就简单的对获取磁盘路径的方法进行研究. 借助搜索引擎,我从网上搜罗来多种方法,都可以直 ...