如何使绝对定位的元素不相互重叠？答案

【问题标题】：How can I make absolute positioned elements not overlapping each other?如何使绝对定位的元素不相互重叠？
【发布时间】：2012-10-05 19:46:27
【问题描述】：

这是我想要做的：我使用gridster 来创建表单创建IDE。用户拖动网格中的元素，并且可以移动它们。

在编辑器中一切正常，但是当我尝试使用这些表单时，当网格位置内的元素变得大于包含它们的网格块时，我遇到了问题，从而使一个元素与另一个元素重叠。

我正在寻找的是一种自动化解决方案，当给定一堆绝对定位的元素时，它会向上或向下移动它们，以免它们重叠。有这种事吗？

【问题讨论】：

您可以根据自己的需要调整Masonry。
如果我可以为每块砖指定行索引和列索引就完美了:)

标签： javascript jquery positioning css-position

【解决方案1】：

绝对定位的全部意义在于它覆盖了客户端重排布局的能力。你的要求与绝对定位的目的直接冲突。

理论上，您可以在每次发生变化时运行一些 javascript 并重新计算所有布局并四处移动，但要做到这一点需要做很多工作。

您可能还会与 Gridster 的代码发生冲突。所以你需要考虑到这一点，甚至可能需要重写 Gridster 代码。

【讨论】：

【解决方案2】：

我自己做了一个解决方法

我写了这段代码，并把它放在一个一直循环的区间内，使属于同一列的元素不重叠。

请注意，.gs_w 是 gridster 网格单元的类，其中包含 .form_row，而 .form_row 又包含输入元素本身并缩小以适应它。

最后，如果启用了拖动，这将不起作用，在我的情况下这是可以的，因为只有我构建的表单编辑器使用拖动。不是表单本身。

setInterval(collision_checks);

/**
 * Handles vertical collisions of gridster elements
 */
function collision_checks()
{
    var elements = $('.gs_w');
    if(!$(elements).length)
    {
        return;
    }

    var columns = {};
    // Group the elements in columns
    $(elements).each(function(){
        //If an element takes more than one columns, add it in all of them
        //so collision gets handled properly
        for(var i = 0; i < $(this).data('sizex'); i++)
        {
            columns[parseInt($(this).data('col'), 10) + i] = columns[parseInt($(this).data('col'), 10) + i] || [];
            columns[parseInt($(this).data('col'), 10) + i].push(this);
        }

    });

    // For each column, handle if it's elements collides with the element below it
    for(var i in columns)
    {
        if(!columns.hasOwnProperty(i)){continue;}
        var column = columns[i];
        for(var j in column)
        {
            if(!column.hasOwnProperty(j)){continue;}
            var element = column[j];
            var element_below = column[parseInt(j,10) + 1];

            if(!$(element).is(':visible'))
            {
                continue;
            }

            if(element == element_below)
            {
                continue;
            }

            var depth = penetration_depth(element, element_below);
            if(depth)
            {
                var offset = $(element_below).position();
                $(element_below).css('top', offset.top + depth);
            }
        }
    }
}


/**
 * if the top element overlaps the bottom one, this function returns their penetration depth
 */
function penetration_depth(el_top, el_bottom)
{
    if(!el_bottom){return 0;}
    if($(el_top).find('.form_row').offset().top + $(el_top).find('.form_row').outerHeight(true) > $(el_bottom).find('.form_row').offset().top)
    {
        return $(el_top).find('.form_row').offset().top + $(el_top).find('.form_row').outerHeight(true) - $(el_bottom).find('.form_row').offset().top;
    }
    else
    {
        return 0;
    }
}

欢迎提出任何建议或改进！

【讨论】：