web桌面程序之图标拖动排序的分析

简介:

  在web桌面程序里,图标拖动并重新排序是个比较常见的功能。这个功能我之前反复修改了好几遍,现在终于整理出了比较理想的解决思路,决定拿出来分享下。

  这一功能主要有哪些难点呢?我总结了一下一共有2处难点

  1、如何知道被拖动的图标在拖动结束后处于哪个位置

  2、知道拖动结束后图标的最后拖动位置,如何判断是在该位置之前插入,还是在之后插入

  知道难点后,就可以来一一解决分析了。

  首先是第一个,如何知道被拖动的图标在拖动结束后处于哪个位置?要解决这一问题,我在之前的《开源的Web桌面应用框架(文件夹功能分析)》这篇文章中简单的提到过,只不过是简单的文字说明,下面我会在文字说明的基础上增加演示,方便大家理解。

  解决这个问题的前提就是需要绘制一套“格子”,这个格子用于图标初始化的排列,也用于拖动后判断结束位置,具体可以看下面的示例:

  http://jsbin.com/nayijunu/2/

  先点第一步,显示格子,再点第二步,加载图标。但其实直接点第二步就行,加载图标的时候才开始绘制格子,并且格子是不需要显示出来的,这里只是让大家更直观的能看到格子。(注:格子就是一组数组,分别记录每个格子的四角位置)

  根据格子放置图标这一步好了之后,我们就可以开始处理刚才第一个问题了,“如何知道被拖动的图标在拖动结束后处于哪个位置”,解决思路就是在拖动结束后,根据鼠标当前位置,在格子数组里进行搜索,因为每个格子都有自己的区域,所以能根据鼠标的坐标查询到处于哪个格子。以下是演示,可以随意拖动图标,拖动结束后会返回拖动结束后,鼠标当前位于哪个格子的编号,为了让效果更明显,在拖动过程中,我还会将鼠标位于的当前格子进行高亮显示。

  http://jsbin.com/edAJAdO/16/

  到这一步后,第一个问题已经解决了。接下来要处理的就是第二个问题,“如何判断是在该位置之前插入,还是在之后插入”。

  这里有几种处理办法:

  1、这种比较死板,就是统一使用一种插入方式,比如全部都在拖动结束后的位置之后插入,但这就会出现这种问题:你永远无法将某个图标拖动到一个位置。

  2、另一种稍微高级点,就是用图标的原始位置和拖动后的位置进行比较,如果后者大于前者,就代表是往前拖动,则图标插入到拖动后的位置之前,反之则插入到拖动后的位置之后。但这个有个缺陷就是,如果图标本身不在区域内,比如有2个区域,均有放置图标,并且可以互相拖动,这时两个位置不在同个区域内,则无法进行比较。

  3、第三种是我经过以上两种整理出一种最合理的办法,就是在每个放置图标的格子内,再进行划分,比如平均分成4个小格子,上面2个,下面2个。然后在图标拖动结束的时候,不仅获取当前位于哪个图标格子,同时也获取当前位于这个图标格子里的小格子的位置,通过这个位置,可以判断出是处于格子的左侧还是右侧,或者上方还是下方。最后根据这个判断是在该位置之前插入,还是之后插入,比如位于左侧,就在之前插入,右侧则在之后插入。(之所以分成4个小格子,目的就是应付图标的两种排列方式:横向排列和纵向排列)

  既然确定了方法,下面就看下实例,同样,为了让效果更明显,在拖动过程中,我还会将鼠标位于的当前格子进行高亮显示。

  http://jsbin.com/xegovabi/2/

  到这一步,基本就已经完成了,之后就是根据这2个参数进行操作了。除此之外,如果图标是纵向排列的,也可以进行处理。下面看下完整版demo吧

  http://jsbin.com/kasocuye/1/



    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/p/3480087.html,如需转载请自行联系原作者


相关文章
|
安全 JavaScript 前端开发
AppSpider 7.5.020 发布 - Web 应用程序安全测试
AppSpider 7.5.020 for Windows - Web 应用程序安全测试
13 0
|
11天前
|
弹性计算 监控 网络安全
如何轻松使用AWS Web应用程序防火墙?
AWS WAF是Web应用防火墙,可防护常见网络攻击。通过创建Web ACL并设置规则,保护CloudFront、API网关、负载均衡器等资源。支持自定义规则与OWASP预定义规则集,结合CloudWatch实现监控日志,提升应用安全性和稳定性。
|
24天前
|
存储 安全 Java
如何在 Spring Web 应用程序中使用 @SessionScope 和 @RequestScope
Spring框架中的`@SessionScope`和`@RequestScope`注解用于管理Web应用中的状态。`@SessionScope`绑定HTTP会话生命周期,适用于用户特定数据,如购物车;`@RequestScope`限定于单个请求,适合无状态、线程安全的操作,如日志记录。合理选择作用域能提升应用性能与可维护性。
|
6月前
|
安全 测试技术 Linux
Acunetix v25.4 发布 - Web 应用程序安全测试
Acunetix v25.4 (Linux, Windows) - Web 应用程序安全测试
181 3
Acunetix v25.4 发布 - Web 应用程序安全测试
|
5月前
|
安全 Devops 测试技术
AppSpider 7.5.018 for Windows - Web 应用程序安全测试
AppSpider 7.5.018 for Windows - Web 应用程序安全测试
97 0
AppSpider 7.5.018 for Windows - Web 应用程序安全测试
|
8月前
|
安全 JavaScript Java
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
101 12
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
|
7月前
|
自然语言处理 安全 测试技术
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
362 0
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
7月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1208 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
7月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。