gridster.jsをダウンロード

以下からソースのDLとデモの閲覧が出来ます。

実装例

実際にインストールするのは難しくないですが、動かした画像の位置を保存する方法は少し考える必要があります。
ここでは以下の様なhtmlがあったと仮定します。

今回は分かりやすいように縦一列に画像が並んでいるものを想定します。
画像の並び替えが済むと同時に保存するのはAjaxを使えば可能ですが、
ここではformのsubmitされた時に確定させる方法を考えてみました。

function hogeFunction() {
　$(‘form’).on(‘submit’,function() {
　　var counter = 0;
　　var imgArr = [];
　　
　　$(this).children(‘#hoge’).children(‘li’).children(‘img’).each(function(){
　　　imgArr[counter] = $(this).attr(‘class’);
　　　counter++;
　　});
　　
　　for (i=imgArr.length-1;i>=0;i=i-1) {
　　　$(this).after(‘‘);
　　}
　　
　　return false;
　});
}　

2行目：formがsubmitされた時に動くことを宣言しています。
6行目～9行目：画像を上から読み込み配列「imgArr」に格納していきます。
11行目～13行目：先ほど作成した配列「imgArr」をもとにhidden値を生成していきます。

これで表示されている順をサーバに送ることが出来ます。
もう少しスマートな方法があるかもしれませんね…。