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

【问题标题】：How to snap elements to grid by jquery or javascript如何通过 jquery 或 javascript 将元素捕捉到网格
【发布时间】：2013-09-03 22:02:49
【问题描述】：

有些元素有class='snap'

我想在正文中找到这些元素。然后snap 和resize 元素以适应Jquery 的网格。

When?

文档已准备就绪。
调整了窗口大小。

Note:

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

See on JsFiddle

任何想法或帮助将不胜感激。

JsFiddle 更新： 删除了CSS 中.content 的宽度，可以是not specified。

【问题讨论】：

您是否真的考虑过如何编写该位代码？或者甚至在 SO 或 Google 上找到了解决方案？
按百分比/你喜欢的方式定位节点，得到它们的位置x，y，通过网格单元长度修改这些数字得到a，b，并将它们的位置（以像素为单位）设置为 x - a, y - b
@putvande 我尝试设置边距或增加高度但没有成功。我没有将这些代码添加到 jsfiddle。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

很好，但是删除.content 宽度并尝试调整窗口大小以查看问题。
有趣的一个...这是因为+1 和-1。我用最后一个演示的最新链接编辑了我的答案。我刚刚将diffHeight = (Math.ceil(height/10)*10) - height; 更改为diffHeight = (Math.ceil((height - 1)/10)*10) - height;
因为响应式元素，给元素指定width和height是不对的。因此，您的第一个 demo 接近正确的解决方案，但未在未指定 .content 的情况下调整窗口大小
嗯，你肯定比我更清楚你真正想做什么。我只是希望这个答案足以以正确的方式指导您，或者至少它可以为您提供一些技巧。