0

私は現在、一種のサーバーインターフェースに取り組んでいます。ユーザーは、項目をドラッグ アンド ドロップして、希望どおりにインターフェイスを調整できる必要があります。Windows 8 のスタート メニューのように、ブロックをドラッグすると、残りの部分が自動的に整列します。

対応する css-attribute が見つかりました(-preamble-)column-count。この種の作品は、テキストに対してのみです。私のウィジェットは<div>コンテナです。

だからここに私の質問があります：

  1. 3 行 n 列のみを許可する可能性はありますか?
  2. -webkit-column-size列幅を同じサイズに保つにはどうすればよいですか (現在、 [Chrome 28]でもビューポート サイズに合わせてサイズ変更されます)。これにより、たとえば 3 つの項目が 1 行に表示されます。
  3. 列間の大きなギャップを防ぐにはどうすればよいですか? -webkit-column-gapギャップを実際に変更することはなく、最小値を設定するだけです。親コンテナーの幅を設定することは、実際にはオプションではありません。非常に動的にしたいからです。

だから、ここに私が取得しようとしているものの例がありますが、うまくいきません:

Before drag: 
1 | 2 | 7 | 8
3 | 4 | 9 | 10
5 | 6 | 11| 12

After dragging "5" behind "7"
1 | 2 | 5 | 8
3 | 4 | 9 | 10
6 | 7 | 11| 12

念のため: この問題の解決策は既にあるので、ドラッグ部分については言及しませんでした。私の現在の問題は、テーブルの配置のみです。

いくつかの例を示すために、jsfiddle を作成しました: http://jsfiddle.net/mine/WmkPR/

4

0 に答える 0