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.
#laravel #laravel-8x #jquery #ajax