文档章节

Cordova下实现手机元素拖动效果

于占涛
 于占涛
发布于 2017/09/10 13:46
字数 618
阅读 31
收藏 1
点赞 1
评论 0

最近参与一个项目,需要在手机端通过js实现元素拖动和替换效果,但是jquery在手机端的功能有限,并且网上的开源项目在手机上均无法达到需要的效果,在万般无奈之下,只好自己通过原生DOM来实现。

下面介绍的是如何实现此功能的相关思路,如果想直接使用这个JS库的朋友可以直接下载。

 源码下载地址

在实现功能之前,我们需要先明确需求,整理业务流程,设计软件类图、时序图,最后再编写代码。虽然这套流程对于一个小项目来说不是必须的,但是对于每一个程序员来说,制作完善的项目文档资料,有助于减少开发过程中的风险,易于后期的维护与改动。养成良好的习惯,也有助于自身技能的提高。

我本着二八定律的原则,尽力少说无用的话,用最精简的图文来描述整个项目的搭建及实现过程。那么,下面,go......

  1. 需求分析

    此项目主要实现一个公用JS组件,为用户操作实现元素的拖动与交换功能。用例图如下:

  2. 业务组件流程的分析

    由于此项目是为二次开发所用,所以业务流程以功能的实现角度入手。根据上一节规划的需求,业务流程如下图:

    上图中所有标记为矩形的动作事件均在鼠标或手机屏幕的点下、移动、点上三种状态中实现。如果大家对图中标记的符号不熟悉,可以百度查找“UML活动图”补习一下即可。

  3. 组件的生命周期

    规划了业务流程之后,我们再从宏观上设计一下软件的状态切换方式,用来更加明确我们要实现什么样的组件功能。

    上图精准的描述了组件的5种状态。其中4种是循环执行用于完成主要功能;注销状态则用来销毁组件所需的变量及事件。(在这种极小的项目中我们并不需要实现一个复杂的状态机功能,只要通过If语句实现状态的转换即可。)

© 著作权归作者所有

共有 人打赏支持
于占涛
粉丝 1
博文 1
码字总数 618
作品 0
朝阳
架构师
使用cordova把h5应用打包成apk

由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1代码可从百度网盘下载:链...

canneljls ⋅ 04/21 ⋅ 0

新建cordova应用,插件开发教程系列(总目录)

以下几篇是连续的教程,代码也是连续的,包括如下章节: 新建cordova应用 https://my.oschina.net/u/1251858/blog/1799002 使用cordova把h5应用打包成apk https://my.oschina.net/u/1251858/...

canneljls ⋅ 04/21 ⋅ 0

开发原生安卓cordova插件(基础)

cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件 以下介绍开发一个最简单的插件,功...

canneljls ⋅ 04/21 ⋅ 0

cordova打包问题,Execution failed for task ':processDebugResources'.

运行cordova run android 或者cordova build android都会有下面的错误与,请问这个怎么解决呢? --------------------------------------------------------------------------------------......

茗香墨语 ⋅ 05/30 ⋅ 0

cordova应用使用手机调试

对于cordova应用的调试,最方便调试方式还是作为h5应用在浏览器来调试,调试好了再打包cordova应用和打包apk。然而h5应用时的效果跟最终在安卓手机运行还有少数情况会不一样,因此,也需要有...

canneljls ⋅ 04/21 ⋅ 0

开发原生安卓cordova插件(有原生界面)

上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件 本文很多操作与上文重复,重复部分会省略 首先打开plug1,先开发插件的原生代码 在以下命名空间创建一个activity 名称为A...

canneljls ⋅ 04/21 ⋅ 0

cordova android build FAILED

下面的命令也许可以治好: 参考: https://cordova.apache.org/docs/en/latest/reference/cordova-cli/index.html#cordova-clean-command...

郭大鹏 ⋅ 04/16 ⋅ 0

Cordova源码解析(二)- 自定义UserAgent

没有提供设置UserAgent的接口,但是有一个办法可以间接的设置。 通过设置中的值来修改,但是这种设置方法有一个限制,需要在的之前调用才能生效(加载PDF比较特殊)。这是Cordova源码中关于这个...

莫云溪 ⋅ 05/15 ⋅ 0

cordova 打包失败,publishNonDefault is deprecated

1、创建好了项目,也添加了平台 ,执行打包的时候就出现如下图,也不像报错,但就是不往下执行了。每次打包都是到这一步。cordova build android 或 cordova build android --release都是一样...

毛兴峰 ⋅ 06/09 ⋅ 0

Ionic3 + Angular Image Cropper

开始 安装插件与第三方库 Apache Cordova Camera plugin ng2-img-cropper node package 生成服务 先生成一个服务,稍后我们将使用它来处理与 的交互的服务。 配置 编辑文件 : 实现具体的服务...

与蟒唯舞 ⋅ 04/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 13分钟前 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 14分钟前 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 34分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 54分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 今天 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 今天 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 今天 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部