【HoorayOS】开源的Web桌面应用框架(文件夹功能分析)-阿里云开发者社区

开发者社区> 橘子红了呐> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
高性能网络I/O框架-netmap源码分析(1)
高性能网络I/O框架-netmap源码分析(1) 作者:gfree.wind@gmail.com 博客:blog.focus-linux.net linuxfocus.blog.chinaunix.net 微博:weibo.com/glinuxer QQ技术群:4367710 前几天听一个朋友提到这个netmap,看了它的介绍和设计,确实是个好东西。
966 0
MyBatis Generator中的新功能
版本1.3.5 请参阅GitHub页面的里程碑1.3.5,了解本版本中发生了什么变化。里程碑1.3.5版本1.3.4 在这个版本中,我们已经弃用了eclipse插件中的弹出菜单项,用于运行MyBatis生成器,它将在下一个版本中被删除。
798 0
高性能网络I/O框架-netmap源码分析(5)
高性能网络I/O框架-netmap源码分析(5) 作者:gfree.wind@gmail.com 博客:blog.focus-linux.net linuxfocus.blog.chinaunix.net 微博:weibo.com/glinuxer QQ技术群:4367710 今天继续前面的netmap_ioctl netmap_ioctl 上次分析完了NIOCGINFO和NIOCREGIF两个,剩下的比较简单了。
682 0
RPC框架Dubbo深入分析
1,背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进 单一应用架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本 此时,用于简化增删改查工作量的 ...
2191 0
常用开源框架中设计模式使用分析
说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者可以简化代码,或者可以是代码逻辑开起来清晰,或者对功能扩展很方便...。
8652 0
3404
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载