Drag and Drop con Laravel básico o Livewire

Una de las grandes características modernas (que ya no es tan moderna...) viene siendo el Drag and Drop, una característica que aunque es muy sencilla en su uso, su implementación siempre da un dolor de cabeza ya que generalmente NO es tan simple.

El drag and drop en español es, arrastrar y soltar es una técnica de interfaz de usuario que permite a los usuarios seleccionar un elemento como una image, documento, video, etc y moverla o arrastrarla asia un lugar destinado en la pantalla mediante el uso del cursor para luego soltar el mismo; esto es un mecanismo comun para subir documentos, en vez de utilizar el característico campo de tipo archivo, pero, puede ser usada para una gran cantidad de desarrollo o implmenentaciones como para organizar contenido, para resolver captchas, entre otros tipos de desarrollos.

Implementar el Drag and Drop en Laravel (Livewire)

Como mencionamos antes, esta no es una caracteristica que sea muy sencilla de implementar, ya que, requiere desarrollar e implementar múltiples funciones, pero, por suerte en Laravel tenemos un paquete que usar, su uso es extremadamente sencillo y al ser código PHP y con Blade lo podemos usar ya sea en Lavarel base, es decir sin ningun agregado o en Livewire.

Por suerte, hay un paquete muy interesante que nos permite realizar esta funcionalidad de una manera muy sencilla tanto en Laravel básico como en Laravel livewire y viene siendo el siguiente paquete:

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

Su instalación es lo típico, un comando de composer:

composer require asantibanez/laravel-blade-sortable

Y ya con esto estamos listos para usarla.

Definir los elementos arrastrables (los items):

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

Y la del contenedor:

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

Tenemos dos etiquetas que podemos emplear, la del contenedor, y la de nuestros elementos arrastrables, para este paquete la del contenedor contiene de una nuestros elementos arrastrables.

Para que el Drag and Drop sirva de algo, le tenemos que asignar un identificador para cuando ocurra el Drag poder disparar alguna función o callback:

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

Y luego, la función de callback:

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

Drag and Drop con Laravel basico o Livewire

Te muestro un ejemplo un poco mas completo, en la cual podemos ver un caso del mundo real:

<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>

Y la funcion callback:

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();
       }
   }

El callback resibe algunos parametros, como el nombre que le coloques al contenedor arrastrable, y los ids o keys que definas para tus elementos arrastrables; te recomiendo que uses la funcion de debug de Laravel (dd) para que conozcas los valores que vas recibiendo.

Si quieres obtener más información de Laravel, recueda que cuentas con el curso de Laravel desde cero.

26-10-2021 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Drag and Drop con Laravel básico o Livewire