【HoorayOS】开源的Web桌面应用框架(文件夹功能分析)

简介:

 下一版本的重要功能就是“文件夹”,随着应用码头的出现,任务栏也改成大图标的模式,桌面可放置图标的位置越来越少,“文件夹”就应然而生了,但在制作过程中,发现几个难点,也就是图标拖动时需要注意的部分。如下图,文件夹内的图标在拖动结束的时候,位置可能会处在四处:应用码头、桌面、当前文件夹、其他文件夹

  前两种情况可以参考下图,图标拖动的第一步就是先画格子。(demo:http://jsbin.com/otihix/1

  然后记录下每个格子四个角的坐标保存为数组,然后循环数组依次添加图标进去。

  之后图标拖动也是需要这个格子数组,当我拖动完毕释放图标的时候,判断鼠标释放的位置处于哪个格子中间,进行图标移动并重新排序,实现图标拖动功能,应用码头拖动也是同样思路,两者结合起来无非就是要判断两次,先判断释放位置是否处于应用码头的格子内,然后再判断是否处于桌面的格子内。

  我在想,文件夹之间的图标拖动是否也可以参考这种模式,桌面上所有已打开并处于显示状态的文件夹窗口,当作是一个个的格子,保存到一个数组里。因为显示在桌面的窗口不管在任何情况都是高于桌面的,也就是覆盖在桌面上,所以当拖动结束释放时,优先判断图标是否处于文件夹的格子内,然后再依次判断应用码头的格子和桌面的格子。

  随之又想到会出现这种情况,就是文件夹会重叠,如果我图标拖动的位置刚好处于图中问号处,系统怎么知道我先要拖放的位置的哪个窗口呢?

  其实细想一下,完全不用担心。我的文件夹格子数组可以在图标拖动的时候创建,创建的时候依次按文件夹窗口z-index的值从大到小来读取,这样就是保证文件夹格子数组里记录内容的顺序也是按照文件夹层级顺序来存放的,当我循环数组判断图标拖放位置的时候,自然也就避免了刚才那个问题。

  OK,以上就是文件夹内图标拖动的大致思路,希望开发的时候能够顺利些,也能让第三版顺利面世,让大家用用试试。

  PS:更新demo演示:http://jsfiddle.net/UjS7Y/2/embedded/result/




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

相关文章
|
2月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
320 63
|
4月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
4月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
6月前
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
747 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
5月前
|
开发者
(WEB CAD online )在线CAD实现圆孔标记功能
本文介绍了通过自定义实体 `McDbTestRoundHoleMark` 实现圆孔标记功能的方法。该功能支持多象限标记、可调节标记角度、多重标记及动态编辑,并自动计算包围盒以优化空间定位与选择操作。核心实现包括类结构定义、数据序列化、标记数据设置、夹点编辑及实体绘制等步骤。用户可通过插件初始化注册并创建圆孔标记,适用于工程图纸标注场景。在线Demo展示了实际效果,便于开发者参考与使用。
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
12月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
622 3
|
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 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
11月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
427 67