jqueryでtable・liなどをドラッグ&ドロップで並び替え(ソート)する【sorttableスマホ対応】

2013-04-27    129   180

ドラッグ&ドロップで並び替える機能はほんの数行で実現できます。まずはjqueryとjquery-uiを下記にアクセスしてダウンロード。jqueryはなるべく自サーバに置いたほうが読み速度が早し、いつリンク先が消えてなくなるか分からないので、直リンクはオススメしません。直リンクの方がラクですけどね^^;

<2019-10-12追記>


スマホ版サイトでドラッグ&ドロップの並び替え(ソート)で実現するには、「jquery.ui.touch-punch」をさらに読み込む必要があります。「jquery-ui.js」の後に読み込んでください。
jquery.ui.touch-punchの公式サイト

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!-- ▼タッチデバイス上でもマウスのドラッグと同様の動作を追加▼ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。id名「sort」にドラッグ&ドロップソートを適応させてみよう。
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.ui.touch-punch.min.js"></script>
<script>
    $(function(){ $("#sort").sortable();});
</script>

PHPでドラッグで並び替えた配列データを受け取る


リストタグ(ul,li)で並び替えをする場合は下記のような感じで、hiddenのinputを使います。あとは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>

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。