概述

　　近期由于产品快速原型开发的需要，不想用原声的方式开发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. 使用 BeautifulSoup 进行解析 html

    #coding=utf-8   import urllib2 import socket import httplib from bs4 import BeautifulSoup   UserAgen ...

  2. 微软BI 之SSAS 系列 - 多维数据集维度用法之二 事实维度(退化维度 Degenerate Dimension)

    这篇文章是基于上一篇 SSAS 系列 - 多维数据集维度用法之一 引用维度 Referenced Dimension 继续讲解多维数据集维度用法中的事实维度. 事实维度,顾名思义就是把事实表 Fact ...

  3. PL/SQL学习笔记之触发器

    一:触发器响应的事件 数据库操作(DML)语句(DELETE,INSERT,UPDATE) 数据库定义(DDL)语句(CREATE,ALTER或DROP) 数据库操作(SERVERERROR,登录,注 ...

  4. wamp设置实现本机IP或者局域网访问

    在 httpd.conf 中查找 Allow from 127.0.0.1 Order Deny,Allow Deny from all Allow from 127.0.0.1 在此下面加上 All ...

  5. 委托到Lambda的进化: ()=> {} 这个lambda表达式就是一个无参数的委托及具体方法的组合体。

    1.原始的委托 (.net 1.0) using System; using System.Collections.Generic; using System.ComponentModel; usin ...

  6. Java线上问题排查思路及Linux常用问题分析命令学习

    前言 之前线上有过一两次OOM的问题,但是每次定位问题都有点手足无措的感觉,刚好利用星期天,以测试环境为模版来学习一下Linux常用的几个排查问题的命令. 也可以帮助自己在以后的工作中快速的排查线上问 ...

  7. Nginx-rtmp 直播媒体实时流实现

    0. 前言 这段时间在搭建一个IPCamera项目服务器.视频点对点通话,客户端会查看设备端的音视频实时流.为了省流量,是通过P2P进行穿透.但是由于NAT设备的原因和IPV4的枯竭.有些设备是无法进 ...

  8. 针对个别utf8编码站点在iis7上浏览器编码不能自动识别的解决方法

    个别utf8编码站点在iis7上客户端浏览器编码不能自动识别的编号,输入仍为gbk2312,而不是utf-8,这样导致我们看到的网站为乱码. 要解决这个问题,有两个方法,一为打开网站以后,右键,选择编 ...

  9. 1. RNN神经网络模型原理

    1. RNN神经网络模型原理 2. RNN神经网络模型的不同结构 3. RNN神经网络-LSTM模型结构 1. 前言 循环神经网络(recurrent neural network)源自于1982年由 ...

  10. 【Unity】UGUI无法修改UI元素的Pivot锚点位置

    如下图,要点击切换左边的Toggle按钮变为Pivot才可以编辑Pivot!   参考: https://answers.unity.com/questions/871238/cant-change- ...