Question

我正在尝试创建一个网格，我可以将图像捕捉到网格中的每个“框”。

我使用尺寸为80px * 80px的图像创建了“看起来像”网格并将其设置为重复。然后我有一个功能，显示我想要实现的目标，但不是以正确的方式：

$(function() {
   $("#draggable5").draggable({
      grid: [80, 80]
   });
});

您可以在此处查看：http://jsfiddle.net/SvZMr/1/

我想要做的是使用快照功能：

$( "#draggable2" ).draggable({ snap: ".CityContainer" });

在JSFIDDLE中，我有一个黄色方块，而不是只捕捉到.CityContainer。我希望这个方块能够捕捉到我的网格中的每个方块（比如在80 * 80网格中移动的蓝色方块）。

我的问题是：为了达到我想要的目标。我是否必须在网格中手动创建方块的每个div，例如：

<div class="square s1"></div>
<div class="square s2"></div>

等等？或者有更简单的方法（没有插件）？

如果我需要在960像素宽的容器中使用10 * 10px网格，则需要花费很多时间。

我希望你能帮助我。： - ）

Answer 1

您可以使用jquery轻松创建html内容，例如附加。

你也可以通过jquery（普通选择器）访问生成的html，只是执行顺序很重要，原因......

小例子：

for(var i = 0;i<50;i++){
    $(".CityContainer").append(
            "<div id='\"'draggable\"" + i
            + " class=\"dropbox ui-widget-content\"></div>"
        );
}
$(".dropbox").droppable();

$( "#draggable2" ).draggable({ snap: ".dropbox", grid: [80,80] });

我修改了你的小提琴，在这里找到它： http://jsfiddle.net/Elak/SvZMr/3/

构建一个网格并使用jQuery与它对齐

1 个答案: