如何通过jquery或javascript将元素捕捉到网格

Question

有些元素有class='snap'

我想在体内找到这些元素。然后snap和resize元素按Jquery调整网格。

When?

• 文件准备就绪。
• 调整窗口大小。

Note:

• 网格单元格的大小为10px
• 元素的内容可以不同。
• 元素可以在1个单元格大小的最大值下移。 （不允许）。
• 由于响应元素，通过指定宽度和高度来捕捉元素是不正确的。

See on JsFiddle

非常感谢任何想法或帮助。

JsFiddle已更新：已移除.content中CSS的宽度，可为not specified。

Answer 1

你可以做什么，这只是一个可以完善的想法，是获得offset div的.snap并删除所有边距。然后你捕捉到下一行（右边和下面的）：

var Content = {
    snapElement: function(element){
        offset = element.offset();
        element.css('left', (Math.ceil(offset.left/10)*10)+'px');
        element.css('top', (Math.ceil(offset.top/10)*10)+'px');
        element.css('margin', '0');
    },
    snapElements: function(){
        var elements = $("body").find(".snap");
        elements.each(function(){
            Content.snapElement($(this));
        });     
    }
}

您还必须使.snap div相对：

.snap {position:relative;}

<强> The demo

您也可以保留边距，但必须将它们减去left和top。

修改：处理width

的更复杂的 demo