如何使絕對定位的元素彼此不重疊？

Question

這是我想做的事情：我正在使用gridster來創建表單創建IDE。 用戶可以在網格中拖動元素，並可以在其中移動元素。

一切都在編輯器中運行良好，但是當我嘗試使用這些表單時，當網格位置內的元素變得大於包含它們的網格塊，從而使一個元素與另一個元素重疊時，我遇到了問題。

我正在尋找的是一種自動化解決方案，當給定一堆絕對定位的元素時，它會將它們上下移動，以免它們重疊。 這樣的東西存在嗎？

Answer 1

絕對定位的全部要點是它覆蓋了客戶重新布局的能力。 您要的是與絕對定位的目的直接沖突。

從理論上講，您可以在每次發生更改時運行一些javascript，然后重新計算所有布局並四處移動，但這要做好很多工作。

您可能還會與Gridster的代碼沖突。 因此，您需要考慮到這一點，甚至可能需要重寫Gridster代碼。

Answer 2

我自己做了一個解決方法

我編寫了這段代碼，並將其放在始終循環的時間間隔內，使屬於同一列的元素不重疊。

請注意， .gs_w是gridster網格單元格的類，該單元格包含.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;
    }
}

歡迎任何建議或改進！