Cordova下实现手机元素拖动效果
Cordova下实现手机元素拖动效果
于占涛 发表于1个月前
Cordova下实现手机元素拖动效果
  • 发表于 1个月前
  • 阅读 13
  • 收藏 1
  • 点赞 1
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

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

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

 源码下载地址

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

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

  1. 需求分析

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

  2. 业务组件流程的分析

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

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

  3. 组件的生命周期

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

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

共有 人打赏支持
粉丝 2
博文 1
码字总数 618
×
于占涛
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: