Drag and Drop with basic Laravel or Livewire

One of the great modern features (which is not so modern anymore...) has been Drag and Drop, a feature that, although it is very simple to use, its implementation always gives a headache since it is generally NOT that simple.

The drag and drop in Spanish is, drag and drop is a user interface technique that allows users to select an element such as an image, document, video, etc and move or drag it to a designated place on the screen by using the cursor to then release it; This is a common mechanism for uploading documents, instead of using the characteristic file type field, but it can be used for a large amount of development or implementation such as organizing content, solving captchas, among other types of development.

Implement Drag and Drop in Laravel (Livewire)

As we mentioned before, this is not a feature that is very easy to implement, since it requires developing and implementing multiple functions, but luckily in Laravel we have a package to use, its use is extremely simple and since it is PHP code and with We can use Blade either in Lavarel base, that is to say without any addition or in Livewire.

Luckily, there is a very interesting package that allows us to perform this functionality in a very simple way, both in basic Laravel and in Laravel livewire, and it is the following package:

https://github.com/asantibanez/laravel-blade-sortable

Its installation is typical, a composer command:

composer require asantibanez/laravel-blade-sortable

And with this we are ready to use it.

Define the draggable elements (the items):

 <x-laravel-blade-sortable::sortable-item>

And the container:

 <x-laravel-blade-sortable::sortable>

We have two labels that we can use, the one for the container, and the one for our draggable elements. For this package, the one for the container contains one of our draggable elements.

For the Drag and Drop to be of any use, we have to assign an identifier so that when the Drag occurs, we can trigger some function or callback:

<x-laravel-blade-sortable::sortable-item sort-key="{{ $c->id }}">

And then, the callback function:

<x-laravel-blade-sortable::sortable wire:onSortOrderChange="handleSortOrderChange">

Drag and Drop with basic Laravel or Livewire

I show you a slightly more complete example, in which we can see a real world case:

<x-laravel-blade-sortable::sortable name="class-{{ $tutorialSection->id }}" wire:onSortOrderChange="handleSortOrderChange">
  @foreach ($tutorialSection->classes()->orderBy('orden')->get() as $k => $c)
     <x-laravel-blade-sortable::sortable-item sort-key="{{ $c->id }}">
        <div class="border m-2 p-4 bg-gray-100">
         <details>
           <summary>{{ $c->title }}</summary>
            @livewire('dashboard.tutorials.tutorial-section-class-save', ['tutorial' => $tutorial, 'tutorialSection' => $tutorialSection, 'tutorialSectionClass' => $c,'nrm'=> $c->orden ], key($c->id))
         </details>
       </div>
     </x-laravel-blade-sortable::sortable-item>
  @endforeach
 </x-laravel-blade-sortable::sortable>

And the callback function:

public function handleSortOrderChange($sortOrder, $previousSortOrder, $name, $from, $to)
   {
       if($name == "sections"){
           
           foreach ($sortOrder as $orden => $id) {
               //dd(TutorialSection::where('id',$id));
               TutorialSection::where('id',$id)->update(['orden' => $orden]);
           }
           $this->sections = $this->tutorial->sections()->orderBy('orden')->get();
       }
   }

The callback receives some parameters, such as the name that you give to the draggable container, and the ids or keys that you define for your draggable elements; I recommend that you use the Laravel debug function (dd) so that you know the values that you are receiving.

If you want more information about Laravel, remember that you have the Laravel course from scratch.

07-04-2023 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Drag and Drop with basic Laravel or Livewire