JavaScript實作拖曳元素對齊到網格（每次移動固定距離）-js教程-PHP中文網

首頁

web前端

js教程

JavaScript實作拖曳元素對齊到網格（每次移動固定距離）

黄舟

Feb 20, 2017 pm 02:38 PM

這幾天在做一個拖曳元素的附加功能，就是對齊到網格，實際上就是確定好元素的初始位置，然後拖曳元素時，每次移動固定的距離。讓元素都可以在網格內對齊。先上效果圖，然後在詳細說明細節問題

JavaScript實作拖曳元素對齊到網格（每次移動固定距離）

做了一個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;
}
p{
margin:0px;
padding:0px;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<p style="height: 600px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgIC
A8ZGVmcz4gICAgICAgIDxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMCAw
IDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMSIgLz4gICAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ
2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==)">
<p id="bk" style="width:50px;height:50px;background: red;position: absolute"></p>
</p>
</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方法也可以）。

以上就是JavaScript實作拖曳元素對齊到網格（每次移動固定距離）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。