這幾天在做一個拖拽元素的附加功能，就是對齊到網(wǎng)格，實際上就是確定好元素的初始位置，然后拖拽元素時，每次移動固定的距離。讓元素都可以在網(wǎng)格內(nèi)對齊。先上效果圖，然后在詳細說明一下細節(jié)問題
做了一個gif圖，可以看到，每次元素的移動都是按照最小單位距離移動的。且每次元素都是對齊到網(wǎng)格的。
先根據(jù)demo說明一下思路和細節(jié)，后面會給出demo代碼。
1. 確定元素的每次移動的最小單位（demo中為10px和10px），也就是每次水平或垂直的位移量都是10px。鋪上一層網(wǎng)格背景是為了幫助我們更好的看到效果（demo中的每個網(wǎng)格也是10px * 10px）。
2. 為了可以更加明顯的看到效果，初始化了元素的寬高（均為10px的倍數(shù)）和默認位置（同樣為10px的倍數(shù)）。舉例說明：元素寬高 50px * 50px，元素的初始位置為0xp * 0px。這樣做的好處是一開始加載時就可以保證元素覆蓋整數(shù)個的小網(wǎng)格（也就是 5 * 5 個小網(wǎng)格），不會出現(xiàn)覆蓋不完整的網(wǎng)格。這一條其實為了讓用戶或者有強迫癥的人不用這么糾結，實際上只是一個美化規(guī)置位置的操作。懂的朋友可以不用這么刻意，明白就好。
3. 最重要就是要如何確定什么時候移動固定的距離。這個demo效果要明白一件事：鼠標移動和元素移動是對應的，但不是實時對等的（當然，如果不考慮最小單位，只是純拖拽元素，然后將元素的位置設置為鼠標的位置，這時可以理解為鼠標移動和元素移動是實時對等的）。回到demo說明，鼠標在網(wǎng)頁上移動時，是一個像素一個像素移動的（可以通過console.log(e.pageX) 觀察鼠標移動的位置 ）。而元素是每10px移動一次。這一點就是我們要理解的關鍵，也是整個demo的關鍵。
了解了上面的思路，結合代碼和注釋，再說明一下：
