1

これが私がやりたいことです：私はフォーム作成IDEを作成するためにgridsterを使用しています。ユーザーはグリッド内の要素をドラッグし、それらを移動できます。

エディター内ではすべてがうまく機能しますが、これらのフォームを使用しようとすると、グリッド位置内の要素がそれらを含むグリッドブロックよりも大きくなり、1つの要素が別の要素と重なるという問題が発生します。

私が探しているのは、絶対位置に配置された要素の束が与えられたときに、それらが重ならないように上下に移動する自動化されたソリューションです。そのようなものは存在しますか？

4

2 に答える 2

0

絶対配置の全体的なポイントは、レイアウトをリフローするクライアントの機能をオーバーライドすることです。あなたが求めているのは、絶対的なポジショニングの目的と直接矛盾しています。

理論的には、何かが変更されるたびにJavaScriptを実行し、すべてのレイアウトを再計算して移動することができますが、それを正しく行うには多くの作業が必要です。

おそらく、Gridsterのコードとも競合するでしょう。したがって、それを考慮に入れる必要があり、場合によってはGridsterコードを書き直す必要があります。

于 2012-10-04T16:49:59.177 に答える
0

自分で回避策を作成しました

このコードを作成し、常にループする間隔内に配置して、同じ列に属する要素が重ならないようにしました。

.gs_wはグリッドスターグリッドセルのクラスであり、.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;
    }
}

提案や改善は大歓迎です！

于 2012-10-05T11:37:59.073 に答える