こんにちは。
少し面白そうなjQueryプラグインをご紹介します。
「gridster.js 」
ドラッグ＆ドロップでパネル(要素)を並びかえれるようになります。
日本語の解説は少ない気がしたので、何かのお役に立てば。

まずはサンプルを。
http://tcb.core-tech.jp/javascript/jquerygridster/（※Chrome推奨！！）
結構気持ちよく動いてくれます。
APIを利用して、要素の追加・削除、要素位置の取得なんかもできます。

では解説します。
まずは必要なファイルを読み込みます。

htmlでは、動かすパネルを用意します。

要素ごとにオプションとして、
・縦横の表示位置（data-row, data-col）
・要素の大きさ（data-sizex, data-sizey）
以上4つの情報を持たせています。

そしてjavascriptで、上記のli要素を動かす準備をします。

/*** gridsterの利用準備 ***/
$(".gridster ul").gridster({
  widget_margins: [10, 10], //widgetごとの間隔を設定
  widget_base_dimensions: [50, 50] //widgetの大きさを設定
});

liを囲んでいるul要素を指定して、gridsterプラグインを呼び出しています。
オプションには
・パネルごとの間隔（widget_margins）
・パネルの大きさ（widget_demensions）
以上2つの情報を持たせています。

これでパネルがぐいぐい動くようになるはずです。
liの点を消して色をつけてあげると分かりやすいかもしれないですね。
基本的な使い方は以上です。
上のサンプルに沿って、APIも少しご紹介します。

—————————————
まずはAPIを利用する準備をします。

/*** gridsterAPIの利用準備 ***/
var gridster = $(".gridster ul").gridster().data("gridster");

1行だけです。
これで各種メソッドが使えるようになりました。

○add.widget()
新しくパネル要素を追加するメソッドです。

/* 新しいwidgetを追加する - add_widget() */
$("#add").click(function() {
  var widget_col = $("#widget_col").val();
  var widget_row = $("#widget_row").val();

  grid_num_max++;
  gridster.add_widget("

• “+grid_num_max+”

", parseInt(widget_col), parseInt(widget_row));
});

パネルの最大値+1にするためにいろいろしてますが、大事なのは最後の行です。
・gridster.add_widget([追加する要素], [横の長さ], [縦の長さ]);
パネルの表示領域内で、一番フィットした場所に要素が加わります。

○remove_widget()
指定した要素を削除するメソッドです。

/* 指定したwidgetを削除する - remove_widget() */
$("#delete").click(function() {
  var li_obj = null;
  var delete_num = $("#delete_num").val();

  //gridster領域から、指定された

• オブジェクトを取得
  $(“.gridster li”).each(function() {
  if($(this).html() == delete_num) {
  li_obj = $(this);
  return false;
  }
  });

  //指定された

• が存在すれば、削除
  if(li_obj != null) gridster.remove_widget(li_obj);
  else alert(“Widget not found…”);
  });

消したい要素のオブジェクトを指定する必要があります。
消しているのは下から2行目です。
・gridster.remove_widget([削除するオブジェクト]);
入力値(消したいliの番号)を取得して、全要素の中から番号を検索 → オブジェクトを取得しています。
そのオブジェクトを引数として、remove_widgetメソッドを読んでいます

○gridster.serialize()
指定した要素のサイズ、位置情報を取得するメソッドです。

/* 現在のwidgetの状況を調べる - serialize() */
$("#serialize").click(function() {
  var li_obj = null;
  var serialize_num = $("#serialize_num").val();

  //gridster領域から、指定された

• オブジェクトを取得
  $(“.gridster li”).each(function() {
  if($(this).html() == serialize_num) {
  li_obj = $(this);
  return false;
  }
  });

  // 指定された

• が存在すれば、情報表示
  if(li_obj != null) {
  var all_grid_data = gridster.serialize();
  var grid_data = gridster.serialize(li_obj);

  //指定された

• 要素をアニメーションで強調する
  var li_width = li_obj.css(“width”);
  var li_height = li_obj.css(“height”);
  li_obj.animate({“width”: “0”, “height”: “0”}, “fast”, function() {
  li_obj.delay(150).animate({“width”: li_width, “height”: li_height}, “fast”);
  });

  // パネル情報の表示
  $(“#grid-data”).fadeOut(“fast”, function() {
  $(this).html(“”);
  $(this).append(“Selected Widget :
  “+serialize_num+”

  “);
  $(this).append(“Location :
  “+grid_data[0][“row”]+” from the Top
  “+grid_data[0][“col”]+” from the Left

  “);
  $(this).append(“Size :
  “+grid_data[0][“size_x”]+” × “+grid_data[0][“size_y”]+”

  “);
  $(this).append(”

  ---

  Total Widget : “+all_grid_data.length+”“);
  $(this).fadeIn(“normal”);
  });
  // 指定された

• がなければ情報表示を消す
  } else {
  alert(“Widget not found…”);
  $(“#grid-data”).fadeOut(“fast”, function() {
  $(this).html(“”);
  $(this).append(“Widget Info…”)
  $(this).fadeIn(“normal”);
  });
  }
  });

16、17行目で取得しています。
・gridster.serialize([情報取得するオブジェクト]);
削除同様、オブジェクトを指定します。
引数を指定しなければ、すべての要素の情報を取得できます。

取得したデータは以下のように連想配列で情報を保持しています。

var grid_data = gridster.serialize(li_obj);
grid_data[0]["row"]; // 縦の位置
grid_data[0]["col"]; // 横の位置
grid_data[0]["size_x"]; // 縦サイズ
grid_data[0]["size_y"]; // 横サイズ

—————————————

リッチなインターフェイスで「おー」となるのはやっぱり楽しいです。

が、このプラグインでは、位置情報を保持する機能は備わっていないようなので、使い所が難しいのかなとも思います。
クッキーに保持、DBへ登録、等々の処理を加えることで、もっと実用的になる気がします。

これを見て下さって、何かしらピーンと来るものがあれば幸いです。