Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Laravel

Livewire Sortable Drag and Drop

Implement drag and drop sorting with Livewire.

16 January 20261 min readLaravelاقرأ بالعربية

On this page

  1. Install SortableJS
  2. Component
  3. View with Alpine

Drag and drop sorting:

Install SortableJS

npm install sortablejs

Component

php
public $items = [];

public function updateOrder($orderedIds)
{
    foreach ($orderedIds as $index => $id) {
        Item::find($id)->update(['order' => $index]);
    }
}

View with Alpine

blade
<div x-data x-init="
    Sortable.create($el, {
        onEnd: (e) => $wire.updateOrder(
            Array.from($el.children).map(el => el.dataset.id)
        )
    })
">
    @foreach($items as $item)
        <div data-id="{{ $item->id }}">{{ $item->name }}</div>
    @endforeach
</div>
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read