標籤：好處 math imsi asm ida dag sig head height
這幾天在做一個拖拽元素的附加功能，就是對齊到網格，實際上就是確定好元素的初始位置，然後拖拽元素時，每次移動固定的距離。讓元素都可以在網格內對齊。先上，然後在詳細說明一下細節問題
做了一個gif圖，可以看到，每次元素的移動都是按照最小單位距離移動的。且每次元素都是對齊到網格的。
先根據demo說明一下思路和細節，後面會給出demo代碼。
1. 確定元素的每次移動的最小單位（demo中為10px和10px），也就是每次水平或垂直的位移量都是10px。鋪上一層網格背景是為了協助我們更好的看到效果（demo中的每個網格也是10px * 10px）。
2. 為了可以更加明顯的看到效果，初始化了元素的寬高（均為10px的倍數）和預設位置（同樣為10px的倍數）。舉例說明：元素寬高 50px * 50px，元素的初始位置為0xp * 0px。這樣做的好處是一開始載入時就可以保證元素覆蓋整數個的小網格（也就是 5 * 5 個小網格），不會出現覆蓋不完整的網格。這一條其實為了讓使用者或者有強迫症的人不用這麼糾結，實際上只是一個美化規置位置的操作。懂的朋友可以不用這麼刻意，明白就好。
3. 最重要就是要如何確定什麼時候移動固定的距離。這個demo效果要明白一件事：滑鼠移動和元素移動是對應的，但不是即時對等的（當然，如果不考慮最小單位，只是純拖拽元素，然後將元素的位置設定為滑鼠的位置，這時可以理解為滑鼠移動和元素移動是即時對等的）。回到demo說明，滑鼠在網頁上移動時，是一個像素一個像素移動的（可以通過console.log(e.pageX) 觀察滑鼠移動的位置 ）。而元素是每10px移動一次。這一點就是我們要理解的關鍵，也是整個demo的關鍵。
瞭解了上面的思路，結合代碼和注釋，再說明一下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0px; padding:0px; } div{ margin:0px; padding:0px; } </style> <script src="js/jquery-1.11.2.js"></script></head><body><div style="height: 600px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgICA8ZGVmcz4gICAgICAgIDxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMCAwIDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMSIgLz4gICAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==)"> <div id="bk" style="width:50px;height:50px;background: red;position: absolute"></div></div></body> <script> $(function(){ var orgX,orgY,eleX,eleY,hasMove=false; $("#bk").on("mousedown",function(e){ orgX= e.pageX; //記錄滑鼠的水平位置 orgY= e.pageY; //記錄滑鼠的垂直位置 eleX=$(this).offset().left; //記錄元素的水平位置 eleY=$(this).offset().top; //記錄元素的垂直位置 hasMove=true; //滑鼠按下時標明當前元素可以拖拽標識 }); $(document).on("mousemove",function(e){ if(hasMove){ //當元素可以拖拽時執行操作 //新位置計算方法為元素的上次位置加上新的位移量 var left=eleX+Math.round( ( e.pageX - orgX ) / 10 ) * 10; var top= eleY+Math.round( ( e.pageY - orgY) / 10 ) * 10; //更新位置資訊 $("#bk").css({ top:top, left:left }); } }).on("mouseup",function(e){ hasMove=false; //滑鼠鬆開時設定元素不可拖拽 }); }) </script></html>
上面的代碼給出的較詳細的注釋，其中，最為關鍵的代碼就是
Math.round( ( e.pageX - orgX ) / 10 ) * 10;
該代碼是計算元素新的位移量，用滑鼠的最新位置減去在元素按下時的滑鼠位置，除以最小單位10，進行四捨五入後獲得整數值，然後在乘以最小單位10。就可以獲得元素應該需要移動的單位距離了。這條如果不明白可以運行代碼自己思考體會一下。（當然使用Mach的ceil和floor方法也可以）。
okay，以上就是javascript實現拖拽元素對齊到網格的實現方法。實質上是在初始化好元素的位置後（按照最小單位倍數初始化），每次移動固定距離（最小單位距離）即可。
感謝閱讀。
轉載請說明出處~~~3Q
JavaScript實現拖拽元素對齊到網格（每次移動固定距離）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
