使用 jQuery 构建网格并捕捉到它

Question

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

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

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

您可以在这里查看：http://jsfiddle.net/SvZMr/1/

我想要做的是使用 snap 功能：

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

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

我的问题是：为了实现我想要的。我是否必须手动创建网格中正方形的每个 div，例如：

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

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

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

我希望你能帮助我。 :-)

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/