文档章节

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

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

「深度学习福利」大神带你进阶工程师,立即查看>>>

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

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

 源码下载地址

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

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

  1. 需求分析

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

  2. 业务组件流程的分析

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

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

  3. 组件的生命周期

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

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

于占涛
粉丝 1
博文 1
码字总数 618
作品 0
朝阳
架构师
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.2K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.7K
0
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
首列固定的列表

实现特殊的表格(UITableView)效果:即表格中的首列固定不动,而每一行除了首列均可左右拖动,以展现每一行更多内容。 作者谭林江(@无法越狱的痛)说:去益盟面试回来,感觉聊得有点郁闷,...

匿名
2013/01/24
1.3K
0
跨平台 3D 游戏引擎--Castle Game Engine

Castle Game Engine 是一个用 Object Pascal 开发的跨平台 3D 游戏引擎。包含一个灵活的 3D 对象系统与开箱即用的水平,项目,智能生物等等。使用 X3D、VRML、Collada 和其他格式实现渲染和处理...

匿名
2013/02/05
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-08-12

最后更新时间: 2020-08-12 00:01 Single Page Applications using Rust - (sheshbabu.com) 使用Rust的单页应用程序 得分:126 | 评论:68 The case for why Google should be regulated as a ......

FalconChen
30分钟前
66
0
在关系数据库中存储分层数据有哪些选择? [关闭]

问题: Good Overviews 良好的概述 Generally speaking, you're making a decision between fast read times (for example, nested set) or fast write times (adjacency list). 一般来说,您......

fyin1314
昨天
7
0
创建myBatis项目

1、简介 1.1、核心组件 SqlSessionFactoryBuilder(构造器):根据配置信息或者代码生成SqlSessionFactory SqlSessionFactory(工厂接口):依靠工厂来生成SqlSession(会话) SqlSession(会话): ...

执键走天涯
昨天
5
0
Tomcat集群带来的问题和解决思路

Tomcat集群 存在问题 解决方案 基于Redis+Cookie+Jackson+Filter的原生解决集群Session共享问题 使用Spring Session零侵入解决Session共享 单点登录实现 Redis构建Session服务器 使用Redis+C...

code-ortaerc
昨天
17
0
小福利

点击有福利 本文分享自微信公众号 - V5codings(gh_c1ec2d16ec93)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

V5codings
2019/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部