概述

　　近期由于产品快速原型开发的需要，不想用原声的方式开发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. 郑晔谈 Java 开发：新工具、新框架、新思维【转载】【整理】

    原文地址 导语:"我很惊讶地发现,现在许多程序员讨论的内容几乎和我十多年前刚开始做 Java 时几乎完全一样.要知道,我们生存的这个行业号称是变化飞快的.其实,这十几年时间,在开发领域已经有 ...

  2. DockOne技术分享（二十）：Docker三剑客之Swarm介绍

    [编者的话]Swarm项目是Docker公司发布三剑客中的一员,用来提供容器集群服务,目的是更好的帮助用户管理多个Docker Engine,方便用户使用,像使用Docker Engine一样使用容器 ...

  3. 微软BI 之SSAS 系列 - 维度的优化,灌木丛属性关系,以及自然层次结构与非自然层次结构的概念

    维度的优化 在 SSAS 开发设计过程中,维度的优化非常重要,因为它在 SSAS 分析服务性能调优的过程中往往能起到一个非常重要的作用. 一般来说,对于 Cube 的性能优化第一步可能考虑的就是查看维 ...

  4. Linux cut命令用法

    cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为: cut  [-bn] [file] 或 cu ...

  5. PL/SQL学习笔记之游标

    一:游标 Oracle会创建一个上下文区域,用于处理SQL语句,其中包含需要处理的语句.处理结果等等. 游标指向这一上下文的区域. PL/SQL通过控制游标在上下文区域移动,来获取SQL语句的结果信息 ...

  6. 〖Android〗Android App项目资源字符串检查（检查是否缺少对应的翻译，导致系统切换语言后崩溃）

    Android项目开发过程中,容易出现缺少对应中英文翻译的情况,这个Python脚本是用于检查字符串是否缺少了对应的翻译 #!/usr/bin/env python # encoding: utf-8 ...

  7. MDK-ARM输出HEX文件重命名设置

    输出的可执行文件和库的名称就是在这里定义.比如我们常见输出Hex文件,其名称就是这里定义的.

  8. CS页面-Asp.net+Spring.Net.Framework--SNF快速开发平台3.0

    SNF快速平台有BS和CS两种,之前介绍了BS界面,下面发几张图看一下CS界面看看是什么样的 这是SNF快速开发平台的CS框架 1.有多种主页和登录页面. 2.多种页面风格 下面就先先看看页面显示的效 ...

  9. vs2015打开慢的解决方法

        1.首先是这里,这里默认是用的软件加速,把"基于客户端性能自动调整视觉体验"去掉勾选.然后把下面的第一个选项去掉,第二选项勾选.我在想,它的"自动"基于 ...

  10. 登录tomcat服务器首页直接跳转到项目

    原文:https://www.cnblogs.com/xwdreamer/p/3489996.html 需求: 客户觉得每次输入http://10.138.16.232:8080/abc/ 比较烦,他 ...