Drag and Drop reorder row position using jQuery UI Sortable in Laravel

By Ved Prakash N | Apr 01, 2023 | Laravel
Share : Whatsapp


Drag and Drop reorder row position using jQuery UI in Laravel

In this post, you will be learning how to re order position / drag and drop for reorder row position using jquery in laravel 10 /9 /8 /7 /6

This is a example of Drag and Drop Rows for Sorting in order wise in laravel. 

dynamic sorting or drag and drop list items or div or table rows, it is simply and easy things for client or any user to understand flow.

So guys, let get started.

Step 1: Install Laravel Project.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Setup Database


Step 3: Create Migration using the following artisan cmd:

php artisan make:migration create_posts_table

once, the migration is successful. It will crreate a migration file for posts. lets open posts table in following path : database/migrations/create_posts_table.php and paste the below code.


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('posts', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

 once the posts column details are added, lets migrate it in the database by following command:

php artisan migrate

Step 4: Create Model

Now, lets create a model for Posts by the following command. 

php artisan make:model Post

once the Model is created. Lets go to the file : app/Models/Post.php and open the Post.php file and paste the below code:


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
    use HasFactory;

    protected $table = 'posts';

    protected $fillable = [

Step 5: Make Route in routes/web.php

Route::get('/posts', [App\Http\Controllers\PostController::class, 'index']);
Route::post('posts/reorder', [App\Http\Controllers\PostController::class, 'reorder']);

Step 6: Create Controller

create a controller named PostController by thee following artisan command:

php artisan make:controller PostController

 once, the controller created successsfully, let go to path: app\Http\Controllers\PostController.php file and paste thee below code


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
    public function index()
        $posts = Post::orderBy('order','ASC')->get();
        return view('posts.index',compact('posts'));

    public function reorder(Request $request)
        $posts = Post::all();

        foreach ($posts as $post) {
            foreach ($request->order as $order) {
                if ($order['id'] == $post->id) {
                    $post->update(['order' => $order['position']]);

        return response('Update Successfully.', 200);

Step 7: Create View / Blade File

First, we need to add these links and scripts tags & also "yield the content and scripts" as [ @yield('content) , @yield('scripts) ] in app.blade.php files

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" />


    <div id="app">

        <main class="py-4">


    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"></script>



Now, Lets create a blade view file ( index.blade.php ) in following path : resources/views/posts/index.blade.php



<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Drag and Drop re-order row position using jQuery UI Sortable in Laravel</h4>
                <div class="card-body">

                    <table class="table table-striped">
                                <th width="30px">#</th>
                        <tbody id="tableBodyContents">
                            @foreach ($posts as $post)
                            <tr class="tableRow" data-id="{{ $post->id }}">
                                <td class="text-center">&#9776;</td>
                                <td>{{ $post->tite }}</td>
                                <td>{{ $post->created_at->format('d-m-Y') }}</td>




    <script type="text/javascript">

        $(document).ready(function () {

            $( "#tableBodyContents" ).sortable({
                items: "tr",
                cursor: 'move',
                opacity: 0.6,
                update: function() {

            function updateOrderPosition() {

                var orderPosition = [];
                var token = $('meta[name="csrf-token"]').attr('content');

                $('tr.tableRow').each(function(index,element) {
                        id: $(this).attr('data-id'),
                        position: index+1

                    type: "POST",
                    dataType: "json",
                    url: "{{ url('/posts/reorder') }}",
                    data: {
                        order: orderPosition,
                        _token: token
                    success: function(response) {
                        if (response.status == "success") {
                        } else {


Step 8: Run Development Server by the following command:

php artisan serve

once, the application is serve is the started, then go to url:


You are all set, now you can drag and drop to re-order the position of posts.