CN113485624A - 基于手势拖拽的iOS看板视图交互方法 - Google Patents
基于手势拖拽的iOS看板视图交互方法 Download PDFInfo
- Publication number
- CN113485624A CN113485624A CN202110495147.2A CN202110495147A CN113485624A CN 113485624 A CN113485624 A CN 113485624A CN 202110495147 A CN202110495147 A CN 202110495147A CN 113485624 A CN113485624 A CN 113485624A
- Authority
- CN
- China
- Prior art keywords
- card
- billboard
- dragging
- column
- ios
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000003993 interaction Effects 0.000 title claims abstract description 33
- 238000000034 method Methods 0.000 title claims abstract description 28
- 230000008859 change Effects 0.000 claims description 7
- 238000005096 rolling process Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及手势看板视图交互方法技术领域，具体为基于手势拖拽的iOS看板视图交互方法，包括以下步骤：S1：开始，S2：展开看板视图，确定待拖拽的卡片，S3：手指长按卡片，卡片原位置以占位行代替，S4：继续移动手指，卡片会随着手指一起进行移动，S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换，S6：结束，S3中，手指长按卡片，卡片会处于拖拽状态，S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动。本发明，通过长按手势和拖拽手势之间得相互配合，使工作人员可以在看板上直接进行操作，快速调整卡片的位置，操作简单方便，提高了工作人员的使用体验，保证工作人员的日常工作的顺利进行。
Description
技术领域
本发明涉及手势看板视图交互方法技术领域，尤其涉及基于手势拖拽的iOS看板视图交互方法。
背景技术
看板视图是一种以卡片的形式展示及组织内容的视图，一般是以横向的列表和纵向的卡片为布局，看板视图利用卡片进行展示，简单直观明了清晰，因此常被用于工作和流程管理。
现在使用的大多数看板视图在使用的过程中，由于受到移动端屏幕大小限制，导致目前看板上展示的卡片大多不能直接操作，工作人员往往无法直接修改卡片在看板视图中的位置，更无法将任务卡片拖拽到屏幕显示之外的列表中去，同时也无法修改看板每一列的位置，导致体验非常不好，影响工作人员的日常工作。
发明内容
本发明的目的是解决现有技术中存在的缺点，而提出的基于手势拖拽的iOS看板视图交互方法。
为了实现上述目的，本发明采用了如下技术方案：基于手势拖拽的iOS看板视图交互方法，包括以下步骤：
S1：开始；
S2：展开看板视图，确定待拖拽的卡片；
S3：手指长按卡片，卡片原位置以占位行代替；
S4：继续移动手指，卡片会随着手指一起进行移动；
S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换；
S6：结束。
优选的，所述S3中，手指长按卡片，卡片会处于拖拽状态。
优选的，所述S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动，超出屏幕部分越多，滚动速度越快。
优选的，所述S5中，卡片进入其他列的某一行时，在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行。
优选的，所述S5中，松开手指，卡片将动态移入占位行所在位置。
优选的，所述技术设计上，每个拖拽事件都会创建一个拖拽会话，每个会话之间是互不冲突的，支持多个拖拽操作同时进行。
优选的，所述长按列，整列将处于拖拽状态，同时整个看板将缩小，便于更改列的位置，拖拽列进入其他列的位置时，与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例。
与现有技术相比，本发明的优点和积极效果在于：
本发明中，主要依赖于iOS系统的两个人机交互手势：长按手势和拖拽手势，看板每一列占手机屏幕一页，横向滚动时以分页的形式展示下一页，当设备横屏时，则取消分页效果，当工作人员需要拖拽卡片时，首先用手指长按卡片，此时卡片将处于拖拽状态，并且卡片原位置以占位行代替，继续移动手指，卡片会跟随手指一起进行移动，当卡片进入当前列表的其他行，占位行与目标行的卡片将会进行动态位置交换，当卡片超出屏幕时，看板会向卡片移动位置的反方向进行滚动，并且超出屏幕部分越多，滚动速度越快，从而形成了一种向屏幕外区域拖拽的效果，当卡片进入其他列的某一行时，此时在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，松开手指，卡片将动态移入占位行所在位置，从而完成卡片的交互移动，若需要移动整列，只需要用手指长按整列的顶部，此时整列将会处于拖拽状态，同时整个看板会缩小，从而便于更改列的位置，拖拽列进入其他列的位置时，会与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例，从而完成交互，通过长按手势和拖拽手势之间得相互配合，使工作人员可以在看板上直接进行操作，快速调整卡片的位置，操作简单方便，提高了工作人员的使用体验，保证工作人员的日常工作的顺利进行。
附图说明
图1为本发明提出基于手势拖拽的iOS看板视图交互方法的流程图；
图2为本发明提出基于手势拖拽的iOS看板视图交互方法的分页显示列示意图；
图3为本发明提出基于手势拖拽的iOS看板视图交互方法的横屏显示示意图；
图4为本发明提出基于手势拖拽的iOS看板视图交互方法的卡片拖拽交互示意图；
图5为本发明提出基于手势拖拽的iOS看板视图交互方法的卡片跨列移动交互示意图；
图6为本发明提出基于手势拖拽的iOS看板视图交互方法的整列拖拽交互示意图；
图7为本发明提出基于手势拖拽的iOS看板视图交互方法的多指拖拽交互示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
在本发明的描述中，需要理解的是，术语“长度”、“宽度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
请参阅图1-7，本发明提供一种技术方案：基于手势拖拽的iOS看板视图交互方法，包括以下步骤：
S1：开始；
S2：展开看板视图，确定待拖拽的卡片；
S3：手指长按卡片，卡片原位置以占位行代替；
S4：继续移动手指，卡片会随着手指一起进行移动；
S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换；
S6：结束。
S3中，手指长按卡片，卡片会处于拖拽状态，S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动，超出屏幕部分越多，滚动速度越快，S5中，卡片进入其他列的某一行时，在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，S5中，松开手指，卡片将动态移入占位行所在位置，技术设计上，每个拖拽事件都会创建一个拖拽会话，每个会话之间是互不冲突的，支持多个拖拽操作同时进行，长按列，整列将处于拖拽状态，同时整个看板将缩小，便于更改列的位置，拖拽列进入其他列的位置时，与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例。
本实施方案中：通过长按手势和拖拽手势之间得相互配合，使工作人员可以在看板上直接进行操作，快速调整卡片的位置，操作简单方便，提高了工作人员的使用体验，保证工作人员的日常工作的顺利进行。
实施例1：基于手势拖拽的iOS看板视图交互方法，包括以下步骤：
S1：开始；
S2：展开看板视图，确定待拖拽的卡片；
S3：手指长按卡片，卡片原位置以占位行代替；
S4：继续移动手指，卡片会随着手指一起进行移动；
S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换；
S6：结束。
S3中，手指长按卡片，卡片会处于拖拽状态，S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动，超出屏幕部分越多，滚动速度越快，S5中，卡片进入其他列的某一行时，在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，S5中，松开手指，卡片将动态移入占位行所在位置，技术设计上，每个拖拽事件都会创建一个拖拽会话，每个会话之间是互不冲突的，支持多个拖拽操作同时进行，长按列，整列将处于拖拽状态，同时整个看板将缩小，便于更改列的位置，拖拽列进入其他列的位置时，与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例。
当工作人员需要拖拽卡片时，首先用手指长按卡片，此时卡片将处于拖拽状态，并且卡片原位置以占位行代替，继续移动手指，卡片会跟随手指一起进行移动，当卡片进入当前列表的其他行，占位行与目标行的卡片将会进行动态位置交换，当卡片超出屏幕时，看板会向卡片移动位置的反方向进行滚动，并且超出屏幕部分越多，滚动速度越快，从而形成了一种向屏幕外区域拖拽的效果，当卡片进入其他列的某一行时，此时在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，松开手指，卡片将动态移入占位行所在位置，从而完成卡片的交互移动。
实施例2：基于手势拖拽的iOS看板视图交互方法，包括以下步骤：
S1：开始；
S2：展开看板视图，确定待拖拽的卡片；
S3：手指长按卡片，卡片原位置以占位行代替；
S4：继续移动手指，卡片会随着手指一起进行移动；
S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换；
S6：结束。
S3中，手指长按卡片，卡片会处于拖拽状态，S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动，超出屏幕部分越多，滚动速度越快，S5中，卡片进入其他列的某一行时，在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，S5中，松开手指，卡片将动态移入占位行所在位置，技术设计上，每个拖拽事件都会创建一个拖拽会话，每个会话之间是互不冲突的，支持多个拖拽操作同时进行，长按列，整列将处于拖拽状态，同时整个看板将缩小，便于更改列的位置，拖拽列进入其他列的位置时，与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例。
若工作人员需要移动整列，只需要用手指长按整列的顶部，此时整列将会处于拖拽状态，同时整个看板会缩小，从而便于更改列的位置，拖拽列进入其他列的位置时，会与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例，从而完成交互。
工作原理：当工作人员需要拖拽卡片时，首先用手指长按卡片，此时卡片将处于拖拽状态，并且卡片原位置以占位行代替，继续移动手指，卡片会跟随手指一起进行移动，当卡片进入当前列表的其他行，占位行与目标行的卡片将会进行动态位置交换，当卡片超出屏幕时，看板会向卡片移动位置的反方向进行滚动，并且超出屏幕部分越多，滚动速度越快，从而形成了一种向屏幕外区域拖拽的效果，当卡片进入其他列的某一行时，此时在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行，松开手指，卡片将动态移入占位行所在位置，若需要移动整列，只需要用手指长按整列的顶部，此时整列将会处于拖拽状态，同时整个看板会缩小，从而便于更改列的位置，拖拽列进入其他列的位置时，会与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例，从而完成交互。
以上，仅是本发明的较佳实施例而已，并非对本发明作其他形式的限制，任何熟悉本专业的技术人员可能利用上述揭示的技术内容加以变更或改型为等同变化的等效实施例应用于其他领域，但是凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所做的任何简单修改、等同变化与改型，仍属于本发明技术方案的保护范围。
Claims (7)
1.基于手势拖拽的iOS看板视图交互方法，其特征在于：包括以下步骤：
S1：开始；
S2：展开看板视图，确定待拖拽的卡片；
S3：手指长按卡片，卡片原位置以占位行代替；
S4：继续移动手指，卡片会随着手指一起进行移动；
S5：当卡片进入到目标行之后，卡片会与目标行卡片进行动态位置交换；
S6：结束。
2.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述S3中，手指长按卡片，卡片会处于拖拽状态。
3.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述S3中，卡片超出屏幕时，看板会向卡片移动位置的反方向滚动，超出屏幕部分越多，滚动速度越快。
4.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述S5中，卡片进入其他列的某一行时，在目标列的目标行插入拖拽卡片的占位行，并且删除起始列的占位行。
5.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述S5中，松开手指，卡片将动态移入占位行所在位置。
6.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述技术设计上，每个拖拽事件都会创建一个拖拽会话，每个会话之间是互不冲突的，支持多个拖拽操作同时进行。
7.根据权利要求1所述的基于手势拖拽的iOS看板视图交互方法，其特征在于：所述长按列，整列将处于拖拽状态，同时整个看板将缩小，便于更改列的位置，拖拽列进入其他列的位置时，与目标位置进行位置交换，松手后拖拽列移入占位列所在位置，并且看板缩放恢复到原始比例。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110495147.2A CN113485624A (zh) | 2021-05-07 | 2021-05-07 | 基于手势拖拽的iOS看板视图交互方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110495147.2A CN113485624A (zh) | 2021-05-07 | 2021-05-07 | 基于手势拖拽的iOS看板视图交互方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113485624A true CN113485624A (zh) | 2021-10-08 |
Family
ID=77932739
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110495147.2A Pending CN113485624A (zh) | 2021-05-07 | 2021-05-07 | 基于手势拖拽的iOS看板视图交互方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485624A (zh) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150281333A1 (en) * | 2014-03-26 | 2015-10-01 | Reddo Mobility | Method and Apparatus for Delivering GUI Applications Executing on Local Computing Devices to Remote Devices |
| CN109885819A (zh) * | 2019-02-19 | 2019-06-14 | 携程旅游信息技术（上海）有限公司 | 数据表格动态调整方法、系统、设备及存储介质 |
-
2021
- 2021-05-07 CN CN202110495147.2A patent/CN113485624A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150281333A1 (en) * | 2014-03-26 | 2015-10-01 | Reddo Mobility | Method and Apparatus for Delivering GUI Applications Executing on Local Computing Devices to Remote Devices |
| CN109885819A (zh) * | 2019-02-19 | 2019-06-14 | 携程旅游信息技术（上海）有限公司 | 数据表格动态调整方法、系统、设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| ALENPAULKEVIN: "《https://www.jianshu.com/p/b3322f41e84c》" * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103218143B (zh) | 一种分类页面切换方法及移动设备 | |
| EP2717145A2 (en) | Apparatus and method for switching split view in portable terminal | |
| CN102681786B (zh) | 文本选择的方法及装置 | |
| CN1957320A (zh) | 导航方法、电子设备、用户界面和计算机程序产品 | |
| US8952992B2 (en) | Zoom processing device, zoom processing method, and computer program | |
| EP2720134A2 (en) | Apparatus and method for displaying information in a portable terminal device | |
| US20100107116A1 (en) | Input on touch user interfaces | |
| CN104423879A (zh) | 信息处理装置、存储介质和控制方法 | |
| CN102946462A (zh) | 一种基于手机的联系人信息分组处理方法及手机 | |
| CN104615343A (zh) | 一种终端截图的方法及装置 | |
| DE202012007707U1 (de) | Vorrichtung zum Vorsehen einer Benutzerschnittstelle auf einer Vorrichtung, die Inhalt-Operatoren anzeigt | |
| CN103399710A (zh) | 实现多窗口操作的移动终端及方法 | |
| CN105373291A (zh) | 一种界面切换方法及装置 | |
| CN103838456A (zh) | 一种桌面图标显示位置的控制方法及系统 | |
| CN105264475A (zh) | 显示控制装置、显示控制方法和程序 | |
| CN103577087A (zh) | 基于触摸屏的页面切换方法和装置 | |
| CN103324439A (zh) | 在具有触控屏的电子设备中批量标记文件的方法及其装置 | |
| CN104423853A (zh) | 一种对象切换方法、装置以及触摸屏终端 | |
| US9513795B2 (en) | System and method for graphic object management in a large-display area computing device | |
| CN103713810A (zh) | 一种移动终端列表数据交互方法及装置 | |
| CN103377001B (zh) | 用于触控装置的浏览页面锁定缩放区域的控制方法 | |
| CN112540713B (zh) | 视频预览进度条缩放方法、系统、设备及存储介质 | |
| CN102662599A (zh) | 一种Android触屏手机的桌面排布及切换方法 | |
| CN103034408A (zh) | 一种用户界面的页面切换方法及移动终端 | |
| CN105808046A (zh) | 一种局部放大查看屏幕的方法、装置及移动终端 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211008 |