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,如需转载请自行联系原作者


相关文章
|
1月前
|
安全 测试技术 数据库
维护的Web应用程序
【10月更文挑战第4天】维护的Web应用程序
47 4
|
21天前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
37 3
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
1月前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
1月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
1月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
39 2
|
1月前
|
云安全 SQL 安全
数字时代下的Web应用程序安全:漏洞扫描服务的功能与优势
在当今这个数字化时代,Web应用程序不仅是企业与用户之间互动的桥梁,更是企业展示服务、传递价值的核心平台。然而,随着技术的不断进步,Web应用程序的复杂性也在不断增加,这为恶意攻击者提供了可乘之机。安全漏洞的频发,如SQL注入、跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等,严重威胁着企业的数据安全、服务稳定性乃至经济利益。在这样的背景下,漏洞扫描服务作为一道重要的安全防线,显得尤为重要。本文将深入探讨漏洞扫描服务在面对Web应用程序安全问题时,所具备的功能优势。
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
101 3
|
18天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
108 45
|
14天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
30 1