How to Drag & Drop todo list in PHP Laravel?

Preetii Hirani

  -  Drag and Drop feature make web page user-friendly and provides a good user interface for the web application.

  -  Using jQuery and jQuery UI library, the drag & drop functionality can be implemented easily.

  -  If you’re developing a web application that listing task or items, then you can easily drag & drop functionality in your web application to increase user experience.

  -  We will also use MySQL database table to display items and also order of items after drag and drop reorder.

  - So in this article you will learn how to implement drag & drop functionality in PHP Laravel.

  1.    Make Php Page

<div class="task_box">

       <div class="column" id="pending">

   <h1>All Tasks</h1>

   @foreach($pending_tasks as $task)

        <div class="list-group-item" data-id="{{ $task->id }}" draggable="true"  >{{ $task->name       }}</div>



        <div class="column" id="progress">

    <h1>In progress</h1>

    @foreach($progress_tasks as $task)

          <div class="list-group-item" data-id="{{ $task->id }}" draggable="true" >{{ $task->name }}</div>



         <div class="column" id="complete">


     @foreach($complete_tasks as $task)

           <div class="list-group-item" data-id="{{ $task->id }}" draggable="true">{{ $task->name }}</div>





  2.    Define Script

<script src= ""></script>

<script src=""></script>

And sortable() function to perform sorting or reordering using Ajax.

<script type="text/javascript">


    connectWith: '.column',

    ghostClass: "blue-background-class",


$('.list-group-item').click(function (event) {



    var id = $(this).attr('data-id');

    var status = $(this).parent().attr('id');


        url: "<?php echo URL('/update_task') ?>",

        data: 'status=' + status + '&id=' + id,

        type: "get",

        success: function (data) {






3.    Route

Route::get('update_task', [MyTaskController::class, 'update_task'])->name('update_task');

   4.    PHP Script(Controller)

public function index(Request $request) {

        $pending_tasks = Task::where('status', 'pending')

                        ->orderBy('id', 'DESC')->get();

        $progress_tasks = Task::where('status', 'progress')

                        ->orderBy('id', 'DESC')->get();

        $complete_tasks = Task::where('status', 'complete')

                        ->orderBy('id', 'DESC')->get();

        return view('my_tasks', compact('pending_tasks', 'progress_tasks', 'complete_tasks'));




public function update_task(Request $request, Task $task) {

        $status = $request->get('status');

        $id = $request->get('id');


        $task = Task::find($id);

        $task->status = $status;


        return 'Task Update successfully.';



In this article, we first fetched items from the database and created a dynamic jQuery drag & drop todo list and applied drag & drop feature.

Finally, as the item is dropped, the status of the item is updated in the database table using an AJAX request to the server.


No Comment

Leave a Comment

Your email address will not be published.

#212, Time Square Empire,SH 42 Mirjapar highway,Bhuj Kutch 370001
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
24 X 7 online support