jQueryの教科書：sort()

■ HTML

<table>

    <thead>

        <tr>

            <th>並び順</th>

            <th>名前</th>

            <th>住所</th>

            <th>電話番号</th>

        </tr>

    </thead>

    <tbody>

        @foreach($items as $item)

            <tr id="{{ $item->id }}">

                <td><span class="oi oi-elevator btn btn-outline-info"></span></td>

                <td>{{ $item->name }}</td>

                <td>{{ $item->address }}</td>

                <td>{{ $item->tel }}</td>

            </tr>

        @endforeach

    </tbody>

</table>

■ HTMLの解説

行を丸ごと

入れ替える場合は、<tr>タグに送信したい値をつける。

■ JavaScript ( jQuery )

$('tbody').sortable({

    update: function (event, ui) {

        var sort = $('tbody').sortable('toArray').join(',');

        $.ajax({

            url: "/api/update_sort",

            type: "POST",

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            data: {

                sort: sort,

            },

            cache: false,

            dataType: "json",

            timeout: 10000,

        })

        .done (function (data, textStatus, jqXHR) {

        })

        .fail (function (data, textStatus, errorThrown) {

        })

        .always (function (jqXHR, textStatus) {

        });

    }

});

■ JavaScript ( jQuery )の解説

sortable関数（プラグイン）は、選択した要素をマウスによって並べ替え可能な要素にする。テーブル行に適用したい場合は、tableではなくtbodyに指定。

　$('tbody').sortable({

.sortable('toArray')で並び替え要素のid文字列を格納した配列を返す。

■ PHP ( Laravel )

public function update_sort($sort = null) 

{

    $array_sort = explode(',' $sort);

    $value = 1;

    foreach ($array_sort as $id) {

        $params = [

            $value,

            $id,

        ];

        $query = 'UPDATE tablr SET orderBy = ? WHERE id = ? ';

        DB::Connection('mysql_kp')->update($query, $params);

        $value++;

    }

}

 http://js.studio-kingdom.com/jqueryui/interactions/sortable