こんにちは、後藤です。

タスク管理アプリケーションなんかでよく見る機能の一つに、ドラッグ&ドロップを使った並び替え機能があります。これをLaravelとSortable.jsを使って実装していきたいと思います。実際に動かしながら並び替えができると、なんだか楽しい気分になります。

Sortable.jsとは

Sortable.jsとは、リストのアイテムをドラッグ&ドロップで並び替える機能を簡単に実装できるJavaScriptライブラリです。使い方は非常にシンプルで、HTMLのリスト要素に対して適用するだけで、そのリストのアイテムがドラッグ&ドロップで並び替えられるようになります。

ライブラリの導入

まずは、Sortable.jsを導入します。CDNを使用して導入する方法を以下に示します。

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>

HTML要素の準備

次に、タスク一覧を表示するHTML要素を作成します。各タスクは個別のdiv要素として作成し、全てを包む親のdiv要素に一意のid属性を付与します。

<div id="taskList">
    @foreach($tasks as $task)
        <div class="task-item" data-id="{{ $task->id }}">
            {{ $task->name }}
        </div>
    @endforeach
</div>

ここで、data-id属性には各タスクの一意のIDを設定します。これによりJavaScriptから各タスクを一意に識別することができます。

JavaScriptの準備

次に、Sortable.jsを使用してタスクの並び替えを可能にするJavaScriptを書きます。

var taskList = document.getElementById('taskList');

Sortable.create(taskList, {
    animation: 150,
    onEnd: function (/**Event*/ evt) {
        var itemEl = evt.item;
        console.log(itemEl.dataset.id);
    },
});

このコードでは、Sortable.createメソッドを使用してタスクリストの並び替えを有効にします。animationオプションにより、ドラッグ＆ドロップ時のアニメーション速度を設定します。

また、onEndオプションを使用して、ドラッグ＆ドロップ操作終了時に発火するイベントハンドラを設定します。この例では、操作対象のHTML要素のdata-id属性を取得し、その値をコンソールに出力します。

Laravelのルートとコントローラーの設定

最後に、JavaScriptからサーバーへの通信を行うためのLaravelのルートとコントローラーを設定します。

routes/web.phpに以下のルートを追加します。

Route::post('/tasks/reorder', 'TaskController@reorder')->name('tasks.reorder');

そして、TaskController.phpに新たにreorderメソッドを追加します。

public function reorder(Request $request)
{
    $tasks = Task::all();

    foreach ($tasks as $task) {
        $task->order = $request->order[$task->id];
        $task->save();
    }

    return response('並び順を変更しました！', 200);
}

このコードでは、送信されてきた各タスクの新しい順序をデータベースに保存しています。新しい順序はリクエストのorderパラメータから取得します。このパラメータはJavaScriptから送信されるもので、各タスクのIDとその新しい順序を対応させた連想配列となっています。

これで、LaravelとSortable.jsを用いてタスクの並び替え機能を実装することができました。

まとめ

Sortable.jsはそのシンプルな使い方と、多機能性から、リストの並び替え機能の実装において非常に役立つツールです。ぜひ、並び替えを実装する際に活用してみてください！