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
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password
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.
<?php
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) {
$table->bigIncrements('id');
$table->string('title');
$table->integer('order')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
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:
<?php
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 = [
'title',
'order'
];
}
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
<?php
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()) }}">
<head>
<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" />
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
<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>
@yield('scripts')
</body>
</html>
Now, Lets create a blade view file ( index.blade.php ) in following path : resources/views/posts/index.blade.php
@extends('layouts.app')
@section('content')
<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>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th width="30px">#</th>
<th>Posts</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tableBodyContents">
@foreach ($posts as $post)
<tr class="tableRow" data-id="{{ $post->id }}">
<td class="text-center">☰</td>
<td>{{ $post->tite }}</td>
<td>{{ $post->created_at->format('d-m-Y') }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
$(document).ready(function () {
$( "#tableBodyContents" ).sortable({
items: "tr",
cursor: 'move',
opacity: 0.6,
update: function() {
updateOrderPosition();
}
});
function updateOrderPosition() {
var orderPosition = [];
var token = $('meta[name="csrf-token"]').attr('content');
$('tr.tableRow').each(function(index,element) {
orderPosition.push({
id: $(this).attr('data-id'),
position: index+1
});
});
$.ajax({
type: "POST",
dataType: "json",
url: "{{ url('/posts/reorder') }}",
data: {
order: orderPosition,
_token: token
},
success: function(response) {
if (response.status == "success") {
console.log(response);
} else {
console.log(response);
}
}
});
}
});
</script>
@endsection
Step 8: Run Development Server by the following command:
php artisan serve
once, the application is serve is the started, then go to url:
http://localhost:8000/posts
You are all set, now you can drag and drop to re-order the position of posts.
Thanks