ASP.NET MVC3Webアプリケーションでダッシュボードインターフェイスを作成する必要があります。最初に、このプロジェクトに必要な機能をリストし、次に、これらすべての機能に対応するために作成する予定の機能を説明するために最善を尽くします。
必要な機能
ダッシュボードには、ダッシュボードインターフェイス内でドラッグ可能なウィジェット（またはタイル）が含まれます。
ウィジェットをドラッグすると、周囲のウィジェットが適切に並べ替えられます。
ウィジェットのサイズ変更や折りたたみはできませんが、取り外し可能です。ユーザーは、必要に応じてメニューからウィジェットを追加し直します。
ウィジェットは、可変幅のブラウザウィンドウに対応する必要があります。垂直方向のスペースはほぼ無制限です。
ウィジェットの高さと幅は300ピクセル単位で、最大900ピクセルになります。つまり、ウィジェットは300 x 300、600 x 300、300 x 900、900x900などになります。
私が構築する予定のもの
これが私が作りたいもののいくつかのイラストです。
寸法は完全ではありませんが、これは9つのウィジェットを備えたダッシュボードを示しています。すべてのウィジェットはぴったりで、画面の幅をエレガントに埋めるために最善を尽くしています。ただし、ウィジェットは完全な正方形または長方形を形成する必要はありません。下の写真のように、ダングラーは問題ありません。
上記の要件に記載されているように、ウィジェットの幅と高さがすべて300ピクセル単位であることに注意してください。これにより、タイルを並べ替えるための計算が簡単になるはずです。それは私の問題に私をもたらします。
私の質問
概念は理解できましたが、どこから始めればよいかわからないのです。私は自分が望んでいたほど数学に堪能ではなく、正しい方向に向けられるためにいくらかの助けが必要です。
特定の順序で並べ替えられていない（すべての形状とサイズの）ウィジェットの配列から、スペースをできるだけエレガントに占める、きちんと配置された絶対に配置されたタイルのグリッドにするにはどうすればよいですか？
これからどのように取得しますか：
これに：
または、少なくとも同様にエレガントなレイアウト。タイルは、上の写真のように正確な場所にある必要はありません。私は彼らにテトリスの完璧なゲームをプレイして、厄介なギャップなしに所定の位置に落ちて欲しいだけです。
ブラウザウィンドウの幅を考慮に入れてから、ウィジェットの配列をループして、ある種の仮想グリッドにウィジェットを追加し始める必要があります。できる限りエレガントに見せたいです。
次に、最初のページの読み込み後にページ上のウィジェットを並べ替える方法を解決した後、ユーザーがウィジェットを移動できるようにし、移動したウィジェットの新しい位置に対応するために他のウィジェットをできるだけきれいに並べ替えるようにする必要があります。 。また、ブラウザーのサイズが変更された場合にウィジェットを並べ替えるエレガントな方法も必要です。
本格的なソリューションや実装は期待していません。私は正しい方向にプッシュする必要があると思います。おそらく、ウィジェットをループするためのロジックと、最適な構成に到達するために計算するものについての簡単なブレインストームの説明です。