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

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

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

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

　　二、知道拖动结束后图标的最后拖动位置，如何判断是在该位置以前插入，仍是在以后插入

　　知道难点后，就能够来一一解决分析了。

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

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

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

　　先点第一步，显示格子，再点第二步，加载图标。但其实直接点第二步就行，加载图标的时候才开始绘制格子，而且格子是不须要显示出来的，这里只是让你们更直观的能看到格子。（注：格子就是一组数组，分别记录每一个格子的四角位置）

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

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

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

　　这里有几种处理办法：

　　一、这种比较死板，就是统一使用一种插入方式，好比所有都在拖动结束后的位置以后插入，但这就会出现这种问题：你永远没法将某个图标拖动到一个位置。

　　二、另外一种稍微高级点，就是用图标的原始位置和拖动后的位置进行比较，若是后者大于前者，就表明是往前拖动，则图标插入到拖动后的位置以前，反之则插入到拖动后的位置以后。但这个有个缺陷就是，若是图标自己不在区域内，好比有2个区域，均有放置图标，而且能够互相拖动，这时两个位置不在同个区域内，则没法进行比较。

　　三、第三种是我通过以上两种整理出一种最合理的办法，就是在每一个放置图标的格子内，再进行划分，好比平均分红4个小格子，上面2个，下面2个。而后在图标拖动结束的时候，不只获取当前位于哪一个图标格子，同时也获取当前位于这个图标格子里的小格子的位置，经过这个位置，能够判断出是处于格子的左侧仍是右侧，或者上方仍是下方。最后根据这个判断是在该位置以前插入，仍是以后插入，好比位于左侧，就在以前插入，右侧则在以后插入。（之因此分红4个小格子，目的就是应付图标的两种排列方式：横向排列和纵向排列）

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

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

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

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