jqueryでtable・liなどをドラッグ&ドロップで並び替え(ソート)する

2013-04-27 20:29:37
ドラッグ&ドロップで並び替える機能はほんの数行で実現できる。まずはjqueryとjquery-uiを下記にアクセスしてダウンロードする。jqueryは自サーバに置いたほうが読み速度が早いから直リンクはオススメしない。
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://code.jquery.com/ui/1.10.2/jquery-ui.js
次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。#sortにドラッグ&ドロップソートを適応させてみよう。
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script>
    $(function(){ $('#sort').sortable();});
</script>
リストタグ(ul,li)で並び替えをする場合は下記のような感じで、あとはPHP側でsort[]の配列を受け取って処理をする。inputタグはhiddenで見えなくしておく。POSTでの受け取りデータ(sort[]配列)は配列キーがドラッグ&ドロップソートでの並び順になっている。
<form method="post" action="sort.php?mode=sortExe">
    <ul id="sort">
        <li>名前<input type="hidden" name="sort[]" value="{$id}" /></li>
        <li>名前<input type="hidden" name="sort[]" value="{$id}" /></li>
        <li>名前<input type="hidden" name="sort[]" value="{$id}" /></li>
        <li>名前<input type="hidden" name="sort[]" value="{$id}" /></li>
        <li>名前<input type="hidden" name="sort[]" value="{$id}" /></li>
    </ul>
    <div><input type="submit" value=" 並び替え実行 " /></div>
</form>
テーブルタグ(tr)でもドラッグ&ドロップソートが動作する。
<form method="post" action="sort.php?mode=sortExe">
    <table>
    <tbody id="sort">
        <tr><td>名前<input type="hidden" name="sort[]" value="{$id}" /></td></tr>
        <tr><td>名前<input type="hidden" name="sort[]" value="{$id}" /></td></tr>
        <tr><td>名前<input type="hidden" name="sort[]" value="{$id}" /></td></tr>
        <tr><td>名前<input type="hidden" name="sort[]" value="{$id}" /></td></tr>
        <tr><td>名前<input type="hidden" name="sort[]" value="{$id}" /></td></tr>
    </tbody>
    </table>
    <div><input type="submit" value=" 並び替え実行 " /></div>
</form>