Laravel Jquery Drag And Drop With Sortable Data Example

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

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 an Item model and then I will create a sorting system using drag and drop and also you can move them from action to inactive and inactive to active vice versa. So I think it is going to be a great tutorial. Because of many projects we need it to create menu ordering or such kind of situation.

See the preview:

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 a 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 an Item table and model. So run the 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',
    ];
}

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 methods so that we can make laravel drag and drop system with a 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. To create a 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.

Hope it can help you.