Using drag and drop sorting on a custom page

May 22, 2023
Misbah ansori
Admin panel

Filament already provides the necessary library for creating custom pages with drag-and-drop sorting functionality. You don't need to install any additional libraries to implement this feature.

To implement drag-and-drop sorting in Filament using Alpine JS, you can use the following code:

x-on:end="console.log('Sorting ended!', $event.detail)"
class="flex flex-col gap-2"
@foreach ($tasks as $task)
x-sortable-item="{{ $task->id }}"
class="py-2 bg-white px-4"
{{ $task->title }}

Here are the steps to implement drag-and-drop sorting in Filament using Alpine JS:

  1. Add the x-data directive to initialize the Alpine JS component.
  2. Add the x-sortable directive to enable sorting functionality.
  3. Add the x-on:end directive to listen for the sorting end event. Inside this directive, you can add the code that you want to execute when the sorting ends.
  4. Add the x-sortable-handle class within the sortable item's markup to define the element that users can interact with to trigger the drag-and-drop action.

And that's it! You can now implement drag-and-drop sorting in Filament using Alpine JS.

With Filament's flexibility, integrating custom sorting functionality becomes a straightforward process.


Hi, I used this example sorting work fine but I have an issue $event.detail is always null, How I can get the sorted list