文档章节

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

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

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

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

 源码下载地址

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

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

  1. 需求分析

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

  2. 业务组件流程的分析

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

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

  3. 组件的生命周期

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

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

© 著作权归作者所有

共有 人打赏支持
于占涛
粉丝 1
博文 1
码字总数 618
作品 0
朝阳
架构师
私信 提问
Cordova 和 Ionic 的区别

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

华山猛男
2018/11/07
0
0
Visual Studio 2015 和 Apache Cordova

在开始前,问一下自己下面这些问题: 熟练掌握web技术的开发者比例是多少?(占所有开发者的比例) 熟练掌握移动开发技术(并且使用跨平台开发工具)的开发者比例是多少? 熟练掌握web技术和...

oschina
2015/01/05
16.8K
22
Cordova应用的JavaScript代码和自定义插件代码的调试

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

jerrywangsap
2018/09/02
0
0
cordova 常用命令、插件

安装 cordova: npm install -g cordova 创建应用程序 cordova create hello com.example.hello HelloWorld 添加平台 cordova platform add android cordova platform add ios 完成后运行以下......

Jack088
2015/03/24
0
2
使用cordova把h5应用打包成apk

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

canneljls
2018/04/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux 权限

权限 0 000 --- 无权限 1 001 --x 执行权限 2 010 -w- 写权限 3 011 -wx 写和执行 4 100 r-- 读权限 5 101 r-x 读和执行 6 110 rw- 读和写 7 111 rwx 读写执行 755 : rwxr-xr-x 660 : rw-r...

忙碌的小蜜蜂
8分钟前
0
0
21分钟教会你分析MaxCompute账单

21分钟教会你分析MaxCompute账单 背景 阿里云大计算服务MaxCompute是一款商业化的大数据分析平台,其计算资源有预付费和后付费两种计费方式。并且产品每天按照project为维度进行计量计费(账...

阿里云云栖社区
12分钟前
0
0
Docker使用 linuxserver/letsencrypt 生成SSL证书最全解析及实践

本文使用 HTTP 和 DNS 两种校验方式对 Docker 下 linuxserver/letsencrypt 项目进行了实践。生成SpringBoot可用证书,使用 Nginx 的 htpasswd 来对网站进行密码保护,并测试使用 fail2ban 防...

java菜分享
12分钟前
0
0
代码吃鸡:Python-Robocode

最近看到一个很有“未来感”的新闻: 一辆特斯拉在拉斯维加斯出了车祸,撞“死”了一个……emmmm……机器人。不知道是意外还是炒作,又或者是这位机器人故意碰瓷,反正人们也无法从受害者口中...

crossin
16分钟前
0
0
什么是公网IP、内网IP和NAT转换?

搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1、引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网I...

Linux就该这么学
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部