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

時間 2019-11-08

標籤 javascript 實現元素對齊網格每次移動固定距離欄目 JavaScript 简体版

原文原文鏈接

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

作了一個gif圖，能夠看到，每次元素的移動都是按照最小單位距離移動的。且每次元素都是對齊到網格的。css

先根據demo說明一下思路和細節，後面會給出demo代碼。html

1. 肯定元素的每次移動的最小單位（demo中爲10px和10px），也就是每次水平或垂直的位移量都是10px。鋪上一層網格背景是爲了幫助咱們更好的看到效果（demo中的每一個網格也是10px * 10px）。java

2. 爲了能夠更加明顯的看到效果，初始化了元素的寬高（均爲10px的倍數）和默認位置（一樣爲10px的倍數）。舉例說明：元素寬高 50px * 50px，元素的初始位置爲0xp * 0px。這樣作的好處是一開始加載時就能夠保證元素覆蓋整數個的小網格（也就是 5 * 5 個小網格），不會出現覆蓋不完整的網格。這一條其實爲了讓用戶或者有強迫症的人不用這麼糾結，實際上只是一個美化規置位置的操做。懂的朋友能夠不用這麼刻意，明白就好。jquery

3. 最重要就是要如何肯定何時移動固定的距離。這個demo效果要明白一件事：鼠標移動和元素移動是對應的，但不是實時對等的（固然，若是不考慮最小單位，只是純拖拽元素，而後將元素的位置設置爲鼠標的位置，這時能夠理解爲鼠標移動和元素移動是實時對等的）。回到demo說明，鼠標在網頁上移動時，是一個像素一個像素移動的（能夠經過console.log(e.pageX) 觀察鼠標移動的位置）。而元素是每10px移動一次。這一點就是咱們要理解的關鍵，也是整個demo的關鍵。svg

瞭解了上面的思路，結合代碼和註釋，再說明一下：this

<!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>

上面的代碼給出的較詳細的註釋，其中，最爲關鍵的代碼就是url

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

該代碼是計算元素新的位移量，用鼠標的最新位置減去在元素按下時的鼠標位置，除以最小單位10，進行四捨五入後得到整數值，而後在乘以最小單位10。就能夠得到元素應該須要移動的單位距離了。這條若是不明白能夠運行代碼本身思考體會一下。（固然使用Mach的ceil和floor方法也能夠）。spa

okay，以上就是javascript實現拖拽元素對齊到網格的實現方法。實質上是在初始化好元素的位置後（按照最小單位倍數初始化），每次移動固定距離（最小單位距離）便可。3d

感謝閱讀。

轉載請說明出處~~~3Q

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。