Laravel 6 drag and drop menu sorting

Laravel 6 drag and drop menu sorting

In a web application, Drag and drop sorting functionality is such an amazing feature when you need to represent the data with custom order without ascending or descending. It gives your user more flexibility to sort their data in a custom sorting order. The most use-case for drag and drop sorting functionality for a web application are menu item sorting, person list sorting, designation list sorting and anything user wants to sort their sorting order. If you are here to read this, then you might be finding an easy and simple way to add drag and drop sorting functionality in your Laravel 6 application. Don't worry, it's not so complex to implement and I'll show you an easy and simple step by step guide on how you can add drag and drop sorting functionality in your Laravel application.

Note: Here I'll show you how to make a drag and drop menu sorting with Laravel 6 and jQuery UI. You can do your self whatever laravel version you are using now. There is no laravel version dependent code. So let's start.

Menu table example data

 id  lable   link    sort_id  
------  ------  ------  ---------
     1  Home    /home           1
     2  Contact /contact        5
     3  About   /about-u        2
     4  Service /service        4
     5  Gallery /gallery        3

Laravel Drag and Drop Sorting

  1. Add jQuery and jQuery UI
  2. Define routes
  3. Make menu controller
  4. Make menu view
  5. Do Js code for Drag and Drop sorting

 

Step 01: Add jQuery and jQuery UI

Add the jQuery and jQuery UI library in your template layout file.

<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"/>

 

Step 2: Define routes

Define 2 routes in your web.php. If you are using an older version of laravel then it'll be app/Http/routes.php

Route::get('menu/index','MenuController@index');
Route::post('menu/update-order','MenuController@updateOrder'); 

 

Step 3: Make Menu Controller

Make a menu controller by artisan command and do code for sorting the menu in custom sorting order.

php artisan make:controller MenuController
<?php

namespace App\Http\Controllers;

use App\Menu;
use Illuminate\Http\Request;


class MenuController extends Controller
{
    public function index(Request $request){
        $data = Menu::orderBy('sort_id','asc')->get();
        return view('menu',compact('data'));
    }

    public function updateOrder(Request $request){
        if($request->has('ids')){
            $arr = explode(',',$request->input('ids'));
            
            foreach($arr as $sortOrder => $id){
                $menu = Menu::find($id);
                $menu->sort_id = $sortOrder;
                $menu->save();
            }
            return ['success'=>true,'message'=>'Updated'];
        }
    }
}

 

Step 4: Make menu view

Make a view file in resources/views directory name with menu.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-4">

            <ul class="sort_menu list-group">
                @foreach ($data as $row)
                <li class="list-group-item" data-id="{{$row->id}}">
                    <span class="handle"></span> {{$row->label}}</li>
                @endforeach
            </ul>

        </div>
    </div>
</div>
<style>
    .list-group-item {
        display: flex;
        align-items: center;
    }

    .highlight {
        background: #f7e7d3;
        min-height: 30px;
        list-style-type: none;
    }

    .handle {
        min-width: 18px;
        background: #607D8B;
        height: 15px;
        display: inline-block;
        cursor: move;
        margin-right: 10px;
    }
</style>
@endsection

 

Step 05: Do Js code for Drag and Drop sorting

At the end of menu.blade.php file before @endsection add these piece of code to make your menu list drag and drop sorting.

<script>
    $(document).ready(function(){

    	function updateToDatabase(idString){
    	   $.ajaxSetup({ headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}});
    		
    	   $.ajax({
              url:'{{url('/menu/update-order')}}',
              method:'POST',
              data:{ids:idString},
              success:function(){
                 alert('Successfully updated')
               	 //do whatever after success
              }
           })
    	}

        var target = $('.sort_menu');
        target.sortable({
            handle: '.handle',
            placeholder: 'highlight',
            axis: "y",
            update: function (e, ui){
               var sortData = target.sortable('toArray',{ attribute: 'data-id'})
               updateToDatabase(sortData.join(','))
            }
        })
        
    })
</script>

 

I hope, this step by step drag and drop sorting tutorial will help you to add drag and drop sorting functionality in your Laravel application. If you find this helpful then please share this tutorial with others.

 

Share on

Related Post


DB Seeder - A database seeder application

Laravel Barcode generation tutorial

Laravel Validation Cheat Sheet

PEST - Make Laravel test easier

Laravel Google reCaptcha without package

Speed Up Laravel website - Step by Step