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

Building a grid and snap to it with jQuery

本文关键字：jQuery 网格 一个 构建      更新时间：2023-09-26

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

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

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

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

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

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

在 JSFIDDLE 中，我有一个黄色的方块，而不是只捕捉到 .城市容器。我希望这个方块能够捕捉到网格中的每个正方形(就像在 80*80 网格中移动的蓝色方块一样(。

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

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

等等？还是有更简单的方法(没有插件(？

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

我希望你能帮助我。

例如，

您可以使用带有附加的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/

相关文章：