文档章节

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

于占涛
 于占涛
发布于 2017/09/10 13:46
字数 618
阅读 49
收藏 1

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

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

 源码下载地址

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

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

  1. 需求分析

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

  2. 业务组件流程的分析

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

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

  3. 组件的生命周期

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

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

© 著作权归作者所有

共有 人打赏支持
于占涛
粉丝 1
博文 1
码字总数 618
作品 0
朝阳
架构师
私信 提问
Cordova应用的JavaScript代码和自定义插件代码的调试

我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。 本文就介绍Cordova应用的调试步骤。 如果大家读过...

jerrywangsap
09/02
0
0
Cordova 和 Ionic 的区别

Cordova Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个...

华山猛男
11/07
0
0
使用Cordova将您的前端JavaScript应用打包成手机原生应用

假设我用JavaScript和HTML开发了一个前端应用,我想把该应用打包成能直接在手机上安装和运行(不通过浏览器)的原生应用,例如像下面这样。对应用的用户来说,他们得到的用户体验和真正的用A...

JerryWang_SAP
10/20
0
0
Cordova(PhoneGap)体系结构(Android)

作者:tonyley 出处:http://my.oschina.net/tonywolf/blog 转载请注明出处 说明: 本文档只争对Cordova(PhoneGap)的Android端,基于Cordova2.1.0版本。 一.总体结构 Cordova的目标是用HTM...

tonyley
2012/10/12
0
0
使用JavaScript调用手机平台上的原生API

我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比如Android,iOS)...

jerrywangsap
08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ui2code中的深度学习+传统算法应用

背景 在之前的文章中,我们已经提到过团队在UI自动化这方面的尝试,我们的目标是实现基于 单一图片到代码 的转换,在这个过程不可避免会遇到一个问题,就是为了从单一图片中提取出足够的有意...

阿里云官方博客
27分钟前
2
0
1-2 【包子mysql系列】, 对mysql的innoDB加锁分析

innoDB的事务,是基于锁来实现的,用到事务不自然就会用到锁,而如果对锁理解的不通透,很容易造成线上问题。 数据库加锁的分析,和事务的引擎,隔离级别,索引,主键索引都有关系, 如果去考...

爱吃大肉包
40分钟前
0
0
插入排序

/** * 插入排序 * @Title: insert * @Description: TODO(这里用一句话描述这个方法的作用) * @param 参数 * @return void 返回类型 * @throws */ static void insert(int[] arr ){ for(int i......

yzzzzzzzz
43分钟前
2
0
python Kmeans算法解析

一. 概述 首先需要先介绍一下无监督学习,所谓无监督学习,就是训练样本中的标记信息是位置的,目标是通过对无标记训练样本的学习来揭示数据的内在性质以及规律。通俗得说,就是根据数据的一...

终日而思一
43分钟前
2
0
Nginx+Keepalived实现站点高可用

Nginx+Keepalived实现站点高可用

吴伟祥
44分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部