如何使用Javascript动态绘制网格框以捕捉到网格

我正在开发带有“捕捉到网格”选项的拖动功能。我可以使用“捕捉到网格”选项进行拖动，但在如何用html绘制网格系统方面遇到了困难

我有一个下拉列表，其中有可用的对齐网格大小（如10*10,20*20,30*30），然后在其中有一个父容器div，我放置了四个框，它们通过对齐网格拖动。我能够使用“捕捉到栅格大小”计算XY位置。但是我想根据用户选择的网格大小值绘制一个网格框

对于创建网格框，是否可以为父容器设置背景图像？或者我们需要创建一个额外的html元素吗

HTML代码：

<label style="margin-right:5px;">Snap To Grid : </label>
<select id="snapToGrid">
    <option value="10">10*10</option>
    <option value="20">20*20</option>
    <option value="30">30*30</option>
    <option value="40">40*40</option>
    <option value="50">50*50</option>
</select>

<div id="status">

</div>
<br />
<div id="parentContainer">
    <div id="container">
        <div class="box" style="left:0px;top:0px;">
            1stBox
        </div>
        <div class="box" style="left:104px;top:0px;">
            2ndBox
        </div>
        <div class="box" style="left:0px;top:104px;">
            3rdBox
        </div>
        <div class="box" style="left:104px;top:104px;">
            4thBox
        </div>
    </div>
</div>

}))

我已经附加了JSFIDLE链接

我想把下面的四个盒子放在上面。

您可以将其用作背景

更新

百分比计算基于简单的公式

假设你的div为100%，现在将其分成n个部分（网格），每个部分占原始div的面积百分比，如果你想将其转换为像素，你可以将结果乘以div的实际宽度（或高度，如果我们说的是方形div，则无所谓）

例如（仅假设为方形网格） 如果网格为2X2，则

100/2=50%

以像素为单位，假设容器是

500px

宽

网格宽度=50/100*500//250px

var mousedown=false；
var-mouseStartXposition；
var zoomContainer=$（“#容器”）；
var$box；
var snapToGridContainer=$（“#snapToGrid”）；
变量snapToGridValue=10；//默认设置为10格（第一个选项）
//处理栅格类和捕捉值的更改
函数initGrid（）{
$（'#parentContainer'）.removeClass（）；
$（'#parentContainer'）.addClass（'grid g-'+$（'#snapToGrid'）.val（））；
snapToGridCount=parseInt（snapToGridContainer.val（））；//有多少网格
//计算单个网格将占用的空间百分比
snapToGridPct=100/snapToGridCount；//%
//考虑到容器div的大小，将其转换为绝对像素
//例如，网格将占用多少像素空间
snapToGridValue=（snapToGridPct/100）*500；//500是#parentContainer的宽度（和高度）
//对于十进制结果
snapToGridValue=parseInt（（snapToGridValue））
}
$（文档）.ready（函数（）{
$（'#snapToGrid'）。更改（initGrid）
$（“.box”）.mousedown（函数（事件）{
mousedown=true；
$box=$（此项）；
//用户界面反馈
$box.css（'光标'，'指针'）
$box.mouseup（函数（）{
$（this.css（'cursor'，'inherit'）；
})
});
$（“#parentContainer，.box”）.mouseup（函数（）{
mousedown=false；
});
$（“#父容器”）.mousemove（函数（事件）{
如果（鼠标向下）{
var clientX=event.clientX；
var clientY=event.clientY；
//包括向左和向上滚动
clientX=clientX+$（“#容器”）.scrollLeft（）；
clientY=clientY+$（“#容器”）.scrollTop（）；
clientX=clientX-zoomContainer.offset（）.left；
clientY=clientY-zoomContainer.offset（）.top；
var snapedX=clientX-（clientX%snapToGridValue）；
var snapedY=clientY-（clientY%snapToGridValue）；
$box.css({
上图：斯内佩迪，
左：snapedX
})
}
});
initGrid（）；//从页面加载开始
});
#容器{
位置：相对位置；
变换原点：左上角；
框大小：内容框；
}
#父容器{
宽度：500px；
高度：500px；
溢出：自动；
框大小：内容框；
}
.盒子{
宽度：100px；
高度：100px；
位置：绝对位置；
边框：1px纯红；
框大小：边框框；/*重要，否则我们需要计算边框*/
}
.电网{
宽度：500px；
高度：500px；
框大小：边框框；
边界：无；
背景：
线性梯度（0度，#CCC 1px，rgba（0,0,0,0）1px），
线性梯度（90度，#CCC 1px，rgba（0,0,0,0）1px），
线性梯度（0度，rgba（0,0,0,0.05）1px，rgba（0,0,0,0）1px），
线性梯度（90度，rgba（0,0,0,0.05）1px，rgba（0,0,0,0）1px）
}
/*像素百分比计算为：100/网格的数量*/
g-10{
背景尺寸：10%10%，10%10%，10%10%，10%10%；
}
g-20{
背景大小：5%5%、5%5%、5%5%、5%5%；
}
g-30{
背景大小：3.3%3.3%，3.3%3.3%，3.3%3.3%，3.3%3.3%；
}
g-40{
背景大小：2.5%2.5%，2.5%2.5%，2.5%2.5%，2.5%2.5%；
}
g-50{
背景大小：2%2%，2%2%，2%2%，2%2%；
}

捕捉到栅格：
10*10
20*20
30*30
40*40
50*50
对于背景大小，您已使用%指定大小。如何将此值更改为20*20,30*30..50*50捕捉大小。是否可以使用线性-渐变（）作为透明？因为我使用的是白色背景，我希望网格边框颜色应该是黑色或灰色。您好，这是一个简单的计算，是的，您可以使用rgba（）实现透明度，我将更新代码谢谢。偶数网格线边界厚度有点高。如何使所有网格框具有相同的厚度。抱歉，忘了提及一些特殊性-当您选择30x30时，红色框不会与网格重叠，这是因为网格之间的间隔达到3.3%或17px（正如我们有#parentContainer width 500px），因为17的倍数。表格是17,34,51,68,85102119..所有数字都是素数或赔率，方框不会完全位于给定的两条相对的左右网格线之间，因为距离大于或小于100px（但我们需要100px），所以您可能需要调整方框的宽度以使其适合。当网格间距为10或5的倍数时，不会出现此类问题
 $(document).ready(function () {

    var mousedown = false;
    var mouseStartXposition;
    var zoomContainer = $("#container");
    var $box;
    var snapToGridContainer = $("#snapToGrid");
    var snapToGridValue;
    $(".box").mousedown(function(event){
        mousedown = true;            
        $box = $(this);
        snapToGridValue = parseInt(snapToGridContainer.val());            
    });

    $("#parentContainer, .box").mouseup(function(){
        mousedown = false;
    });

    $("#parentContainer").mousemove(function(event){           
        if(mousedown){
            var clientX = event.clientX;
            var clientY = event.clientY;
            // Include Scroll Left and Top
            clientX = clientX + $("#container").scrollLeft();
            clientY = clientY + $("#container").scrollTop();

            clientX = clientX - zoomContainer.offset().left;
            clientY = clientY - zoomContainer.offset().top;

            var snapedX = clientX - (clientX % snapToGridValue);
            var snapedY = clientY - (clientY % snapToGridValue);

            //  apply to boxes
            $box.css({
                top:snapedY,
                left:snapedX
            })
        }
    });