这是我想要做的：我正在使用gridster来创建表单创建IDE。用户拖动网格中的元素，并可以移动它们。
编辑器内部的一切都很好用，但是当我尝试使用这些表格但是当网格位置内的元素变得比包含它们的网格块更大时，我遇到了问题，使一个元素与另一个元素重叠。
我正在寻找的是一种自动化解决方案，当给定一堆绝对定位元素时，它会向上或向下移动它们以使它们不重叠。这样的事情存在吗？
答案 0 :(得分：0)
绝对定位的全部意义在于它会覆盖客户端重排布局的能力。你所要求的是与绝对定位的目的相冲突。
理论上，你可以在每次更改内容时运行一些javascript并重新计算所有布局并移动周围的东西，但要做到这一点还有很多工作要做。
您可能也会与Gridster的代码冲突。所以你需要考虑到这一点，甚至可能需要重写Gridster代码。
答案 1 :(得分：0)
我自己做了一个解决方法
我编写了这段代码，并将其放在一直循环的区间内，使属于同一列的元素不重叠。
请注意.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;
}
}
又包含输入元素本身并缩小以适应它。
最后，如果启用了拖动，这将无效，在我的情况下，这是正常的，因为只有我构建的表单编辑器使用拖动。不是形式本身。
{{1}}
欢迎任何建议或改进！