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