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/