快捷導(dǎo)航

JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格（每次移動(dòng)固定距離）

更新時(shí)間：2016年11月30日 11:41:38 作者：Jeremy陽仔

最近在做一個(gè)拖拽元素的附加功能，就是對(duì)齊到網(wǎng)格，實(shí)際上就是確定好元素的初始位置，然后拖拽元素時(shí)，每次移動(dòng)固定的距離。讓元素都可以在網(wǎng)格內(nèi)對(duì)齊

這幾天在做一個(gè)拖拽元素的附加功能，就是對(duì)齊到網(wǎng)格，實(shí)際上就是確定好元素的初始位置，然后拖拽元素時(shí)，每次移動(dòng)固定的距離。讓元素都可以在網(wǎng)格內(nèi)對(duì)齊。先上效果圖，然后在詳細(xì)說明一下細(xì)節(jié)問題

做了一個(gè)gif圖，可以看到，每次元素的移動(dòng)都是按照最小單位距離移動(dòng)的。且每次元素都是對(duì)齊到網(wǎng)格的。

先根據(jù)demo說明一下思路和細(xì)節(jié)，后面會(huì)給出demo代碼。

1. 確定元素的每次移動(dòng)的最小單位（demo中為10px和10px），也就是每次水平或垂直的位移量都是10px。鋪上一層網(wǎng)格背景是為了幫助我們更好的看到效果（demo中的每個(gè)網(wǎng)格也是10px * 10px）。

2. 為了可以更加明顯的看到效果，初始化了元素的寬高（均為10px的倍數(shù)）和默認(rèn)位置（同樣為10px的倍數(shù)）。舉例說明：元素寬高 50px * 50px，元素的初始位置為0xp * 0px。這樣做的好處是一開始加載時(shí)就可以保證元素覆蓋整數(shù)個(gè)的小網(wǎng)格（也就是 5 * 5 個(gè)小網(wǎng)格），不會(huì)出現(xiàn)覆蓋不完整的網(wǎng)格。這一條其實(shí)為了讓用戶或者有強(qiáng)迫癥的人不用這么糾結(jié)，實(shí)際上只是一個(gè)美化規(guī)置位置的操作。懂的朋友可以不用這么刻意，明白就好。

3. 最重要就是要如何確定什么時(shí)候移動(dòng)固定的距離。這個(gè)demo效果要明白一件事：鼠標(biāo)移動(dòng)和元素移動(dòng)是對(duì)應(yīng)的，但不是實(shí)時(shí)對(duì)等的（當(dāng)然，如果不考慮最小單位，只是純拖拽元素，然后將元素的位置設(shè)置為鼠標(biāo)的位置，這時(shí)可以理解為鼠標(biāo)移動(dòng)和元素移動(dòng)是實(shí)時(shí)對(duì)等的）。回到demo說明，鼠標(biāo)在網(wǎng)頁上移動(dòng)時(shí)，是一個(gè)像素一個(gè)像素移動(dòng)的（可以通過console.log(e.pageX) 觀察鼠標(biāo)移動(dòng)的位置）。而元素是每10px移動(dòng)一次。這一點(diǎn)就是我們要理解的關(guān)鍵，也是整個(gè)demo的關(guān)鍵。

了解了上面的思路，結(jié)合代碼和注釋，再說明一下：

<!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; //記錄鼠標(biāo)的水平位置
orgY= e.pageY; //記錄鼠標(biāo)的垂直位置
eleX=$(this).offset().left; //記錄元素的水平位置
eleY=$(this).offset().top; //記錄元素的垂直位置
hasMove=true; //鼠標(biāo)按下時(shí)標(biāo)明當(dāng)前元素可以拖拽標(biāo)識(shí)
});
$(document).on("mousemove",function(e){
if(hasMove){ //當(dāng)元素可以拖拽時(shí)執(zhí)行操作
//新位置計(jì)算方法為元素的上次位置加上新的位移量
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; //鼠標(biāo)松開時(shí)設(shè)置元素不可拖拽
});
})
</script>
</html>

面的代碼給出的較詳細(xì)的注釋，其中，最為關(guān)鍵的代碼就是

Math.round( ( e.pageX - orgX ) / 10 ) * 10;

該代碼是計(jì)算元素新的位移量，用鼠標(biāo)的最新位置減去在元素按下時(shí)的鼠標(biāo)位置，除以最小單位10，進(jìn)行四舍五入后獲得整數(shù)值，然后在乘以最小單位10。就可以獲得元素應(yīng)該需要移動(dòng)的單位距離了。這條如果不明白可以運(yùn)行代碼自己思考體會(huì)一下。（當(dāng)然使用Mach的ceil和floor方法也可以）。

okay，以上就是javascript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格的實(shí)現(xiàn)方法。實(shí)質(zhì)上是在初始化好元素的位置后（按照最小單位倍數(shù)初始化），每次移動(dòng)固定距離（最小單位距離）即可。

您可能感興趣的文章: