Laravel Drag and Drop with Sortable Data using Jquery UI



Hello artisan in this laravel drag and drop tutorial i am going to show you step by step about laravel drag and drop example in laravel. In this example i will also show you laravel drag and drop sorting with active inactive status field of item.

In this example i will use jQuery UI to enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

I will simply create Item model and then i will create sorting system using drag and drop and also you can move them to active to inactive and inactive to active vice verca. So i think it is going to be a great tutorial. Because many project we need it to create menu ordering or such kind of situation.

See the preview:

 

laravel-jquery-drag-and-dropable-example

 

Step 1: Download Laravel

In the first step we need to download our project or you can implement it in your existing project. So download it via below command. 

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

 

Step 2: Create Route

Now in this example i will create route to make our laravel drag and dropable application. So create this below route

routes\web.php

//route
Route::get('/', 'ItemController@itemView');
Route::post('/update-items', 'ItemController@updateItems')->name('update.items');

 

Step 3: Create Migration

In this step i will create Item table and model. So run below command to create it.

php artisan make:model Item -m

 

After running this above command open your newly created migrated file and paste those below field in this items table.

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

class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->integer('order');
            $table->tinyInteger('status');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

 

And now

App\Item.php

//model

namespace App;

use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    protected $fillable = [
        'title', 'order', 'status',
    ];
}

 

jquery-laravel-drag-and-dropable-example

 

Now run php artisan migrate command to create our items table.

 

Step 4: Create Controller

In this step we need to create our ItemController to create our two method so that we can make laravel drag and drop system with sortable option.

App\Http\Controllers\ItemController.php

//controller

namespace App\Http\Controllers;
use App\Item;
use Illuminate\Http\Request;

class ItemController extends Controller
{
    public function itemView()
    {
    	$panddingItem = Item::where('status',0)
		                    ->orderBy('order')
							->get();
    	$completeItem = Item::where('status',1)
		                    ->orderBy('order')
							->get();
    	return view('test',compact('panddingItem','completeItem'));
    }
    public function updateItems(Request $request)
    {
    	$input = $request->all();
        
		if(!empty($input['pending']))
    	{
			foreach ($input['pending'] as $key => $value) {
				$key = $key + 1;
				Item::where('id',$value)
						->update([
							'status'=> 0,
							'order'=>$key
						]);
			}
		}
        
		if(!empty($input['accept']))
    	{
			foreach ($input['accept'] as $key => $value) {
				$key = $key + 1;
				Item::where('id',$value)
						->update([
							'status'=> 1,
							'order'=>$key
						]);
			}
		}
    	return response()->json(['status'=>'success']);
    }
}

 

Step 5: Create View

Now we are in the final step and all are almost set to go. So create view and paste those below code to see our jQuery drag and dropable data.

resources\views\test.blade.php

 

Recommended: API Authentication Tutorial with Laravel Passport

 

Now all are set to go. Run php artisan serve and test it to visit below url.

 

URL
127.0.0.1:8000

 

Hope it can help you.

 

Facebook Github
A web enthusiastic, self-motivated Full-Stack Web Developer from Dhaka, Bangladesh with experience in developing applications using Laravel Vue and React Js Application.