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

2013-04-27 675 1713

ドラッグ＆ドロップで並び替える機能はほんの数行で実現できます。まずは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>