soliloquy / JavaScript / jQuery sortable その後どうする？

独り言

jQuery sortable その後どうする？

jQuery UI を使用すると非常に簡単にオブジェクトのソートが実装出来ます。使い方は公式サイトをはじめ google で検索すると多くの説明がされています。ただ、使う目的＝データをソートした結果をどうするのか？といった事がよく解らないと言う方も多いのではないでしょうか？
jQuery Sortable を使ってソートした結果を取得する作業を行った時の記録です。

  1. jQuery、jQuery UI のダウンロード

    jQuery はリンク指定で使用できますが、セキュリティーに煩いクライアント様ですと、外部リンクNGなどどいう事になりますので、ここでは公式サイトからローカルにダウンロードします。

    • jQuery のダウンロードは、ページ右上の「Download jQuery」のボタンから行えます。jQuery UI は、Other Related Projects の茶色いボタン=「jQuery User Interface」のボタンをクリックしてダウンロードページに移動します。jQuery UI は、APIを選択してダウンロードできますが、すべてをダウンロードしても500kb程度ですのですべてをダウンロードします。
      ここで使用したのは、「jquery-3.3.1.min.js」「jquery-ui.min.js」「jquery-ui.min.css」の3ファイルです。

  2. 1グループでの単純なソート

    単一グループでのソートは非常に簡単です。ここで送信された値は$_POST[‘sortable_’]に配列として順番に格納されます。
    ◆動作イメージ◆はこんな感じです。

    html の内容はこんな感じ
<html>
<head>
    <link rel="stylesheet" href="CSSフォルダー/jquery-ui.min.css">
    <link rel="stylesheet" href="CSSフォルダー/sortable.css">
    <script src="JSフォルダー/jquery-3.3.1.min.js"></script>
    <script src="JSフォルダー/jquery-ui.min.js"></script>
    <script srt="JSフォルダー/sortable.js"></script>
</head>
<body>
    <form method="post" action="confirm.php">
        <ul id="sortable">
            <li class="ui-state-default">Item-1<input type="hidden" name="sortable_[]" value="Item-1"></li>
            <li class="ui-state-default">Item-2<input type="hidden" name="sortable_[]" value="Item-2"></li>
            <li class="ui-state-default">Item-3<input type="hidden" name="sortable_[]" value="Item-3"></li>
            <li class="ui-state-default">Item-4<input type="hidden" name="sortable_[]" value="Item-4"></li>
            <li class="ui-state-default">Item-5<input type="hidden" name="sortable_[]" value="Item-5"></li>
        </ul>
        <input type="submit" value="POST">
    </form>
</body>
</html>

    sortable.js の中身はこれだけ
$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

    sortable.css の中身です。特に動作に関係ありません。
 #sortable {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
 }
 #sortable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    height: 30px;
    cursor: move; <= マウスのカーソルを変更します。
 }

    ソートは jQuery UI がすべてしてくれます。ここでは ul がブロックで li の内容をソートします。そこで input タグの name を配列にすることで POST したデータは順番に連番が振られます。

  3. 複数のグループで入れ替え>ソートをする場合

    複数のグループ間で、移動やソートをする場合は「connectWith」のオプションと「stop」のオプションを利用します。「stop」のオプションはソートした後で呼ばれますので、ここで親エレメントの id を取得してinpuotのnameに取得した id の配列名を設定するだけです。
    因みに、「placeholder」のオプションをここでは使用していますが、単に移動する時に移動するエレメントの下に枠を表示させているだけです。こちらをご確認ください。オプションについては、こちらに詳しく書かれています。
    ◆動作イメージ◆はこんな感じです。

    html の内容はこんな感じ
<html>
<head>
    <link rel="stylesheet" href="CSSフォルダー/jquery-ui.min.css">
    <link rel="stylesheet" href="CSSフォルダー/sortable.css">
    <script src="JSフォルダー/jquery-3.3.1.min.js"></script>
    <script src="JSフォルダー/jquery-ui.min.js"></script>
    <script srt="JSフォルダー/sortable.js"></script>
</head>
<body>
    <div class="txt-center">
        <form method="post" action="confirm.php">
            <input type="hidden" name="reqform" value="group">
            <ul id="sortable" class="connectedSortable">
                <li class="ui-state-default">Item-1<input type="hidden" name="sortable_[]" value="Item-1"></li>
                <li class="ui-state-default">Item-2<input type="hidden" name="sortable_[]" value="Item-2"></li>
                <li class="ui-state-default">Item-3<input type="hidden" name="sortable_[]" value="Item-3"></li>
                <li class="ui-state-default">Item-4<input type="hidden" name="sortable_[]" value="Item-4"></li>
                <li class="ui-state-default">Item-5<input type="hidden" name="sortable_[]" value="Item-5"></li>
            </ul>
            <ul id="sortable2" class="connectedSortable">
                <li class="ui-state-highlight">Item-11<input type="hidden" name="sortable2_[]" value="Item-11"></li>
                <li class="ui-state-highlight">Item-12<input type="hidden" name="sortable2_[]" value="Item-12"></li>
                <li class="ui-state-highlight">Item-13<input type="hidden" name="sortable2_[]" value="Item-13"></li>
                <li class="ui-state-highlight">Item-14<input type="hidden" name="sortable2_[]" value="Item-14"></li>
                <li class="ui-state-highlight">Item-15<input type="hidden" name="sortable2_[]" value="Item-15"></li>
            </ul>
            <input type="submit" value="POST">
        </form>
    </div>
</body>
</html>

    sortable.js はこんな感じです。オプションを追加しています。
$( function() {
    $( "#sortable, #sortable2" ).sortable({
        connectWith: ".connectedSortable", <= connectedSortable のクラス名を持つエレメント間で移動を可能にします。
        placeholder: "ui-state-highlight",
        stop: function(event, ui) {
            // 親エレメント=ulのidを取得して子エレメント=inputのname を変更
            ui.item.children().attr('name', ui.item.parent().prop('id') + '_[]');
        }
    });
    $( "#sortable, #sortable2" ).disableSelection();
});

    ソート完了時にstopイベントが発生します。イベントハンドラーを使ってオブジェクトを取得して親要素（parent）のid名を取得して子要素（children）のnameを変更しています。「+ _[]’」は配列要素にするために付加してあります。

    sortable.css
#sortable, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    cursor: move;
    height: 30px; <= placeholderを使用する場合高さの指定が必要
}

    グループが増えた場合sortable3、sortable4といった具合に増やすだけです。jQuery UI のおかげコーディングする部分はほんの数行ですみます。上記内容でPOSTすると、ソートされた情報が「$_POST[‘sortable_’」と「$_POST[‘sortable2_’」に配列で格納されます。

    ページのトップへ

wordprass