Livewire Sortable.js

To implement a single list (e.g., a to-do list), apply the following attributes to your HTML:

• wire:sortable="methodName": Added to the container element. methodName is the Livewire method called when the order changes.
• wire:sortable.options: (Optional) Pass Sortable.js options as a JSON object.
• wire:sortable.item="itemIdentifier": Added to each draggable item. This identifier is sent to your Livewire method.
• wire:sortable.handle: (Optional) Added to a specific element within the item to act as the drag handle.

Data Format: Your Livewire method will receive an array of objects:

[
    [
        'order' => 1,   // order of item (starts at 1)
        'value' => 20,  // item id
    ],
]

<ul wire:sortable="updateTaskOrder" wire:sortable.options="{ animation: 100 }">
    @foreach ($tasks as $task)
        <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
            <h4>{{ $task->title }}</h4>
            <button wire:sortable.handle>drag</button>
        </li>
    @endforeach
</ul>

To allow moving items between different lists, use the wire:sortable-group attributes:

• wire:sortable-group="methodName": Added to the wrapper containing all lists. This method handles item movement between groups.
• wire:sortable-group.item-group="groupIdentifier": Added to the root element of each list. Identifies the group.
• wire:sortable-group.options: (Optional) Pass Sortable.js options to the list.
• wire:sortable-group.item="itemIdentifier": Added to each draggable item within the lists.
• wire:sortable-group.handle: (Optional) Drag handle for the item.

Data Format: Your Livewire method (the one assigned to wire:sortable-group) will receive an array representing the updated state of the groups:

[
    [
        'order' => 1,            // order of group (starts at 1)
        'value' => 20,           // group id
        'items' => [
            [
                'order' => 1,    // order of item within group (starts at 1)
                'value' => 50,   // item id
            ]
        ]
    ]
]

<div wire:sortable-group="updateTaskOrder">
    @foreach ($groups as $group)
        <div wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>

            <ul wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    <li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                        <span>{{ $task->title }}</span>
                        <button wire:sortable-group.handle>drag</button>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>

If you need both the lists (groups) and the items within them to be draggable, combine wire:sortable and wire:sortable-group:

1. For Group Reordering: Use wire:sortable="methodName" on the outer container and wire:sortable.item="groupIdentifier" on the group elements.
2. For Item Reordering/Moving: Use wire:sortable-group="methodName" on the outer container and wire:sortable-group.item-group="groupIdentifier" on the list elements.

Data Formats:

• Moving an item: The wire:sortable-group method receives the group/item structure described in the 'Multiple lists' section.
• Moving a group: The wire:sortable method receives the group order structure:

[
    [
        'order' => 1,   // order of group (starts at 1)
        'value' => 20,  // group id
    ],
]

<div wire:sortable="updateGroupOrder" wire:sortable-group="updateTaskOrder" wire:sortable.options="{ animation: 50 }">
    @foreach ($groups as $group)
        <div wire:sortable.item="{{ $group->id }}" wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>
            <button wire:sortable.handle>drag group</button>

            <ul wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    <li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                        <span>{{ $task->title }}</span>
                        <button wire:sortable-group.handle>drag item</button>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>

The @sortable-group directive is designed for complex layouts involving multiple nested groups of draggable items. It manages the state of multiple sub-groups within a single master container.

Key Features:

• Nested Group Management: It looks for elements with the wire:sortable-group.item-group modifier to manage sub-collections.
• Data Structure: When a sort occurs, it calls the Livewire method defined in wire:sortable-group with a structured array representing all sub-groups and their respective items.
• Item Identification: Items must be marked with wire:sortable-group.item.
• Handles: Drag handles are identified by wire:sortable-group.handle.
• Configuration: Custom options can be passed via wire:sortable-group.options as a JSON string.

<!-- HTML Template -->
<div wire:sortable-group="updateGroups" wire:sortable-group="my-complex-layout">
    <div wire:sortable-group.item-group="group-a">
        <div wire:sortable-group.item="a1">Item A1</div>
        <div wire:sortable-group.item="a2">Item A2</div>
    </div>
    <div wire:sortable-group.item-group="group-b">
        <div wire:sortable-group.item="b1">Item B1</div>
    </div>
</div>

<!-- Livewire Component Method -->
public function updateGroups($groups)
{
    // $groups is an array of:
    // [
    //    ['order' => 1, 'value' => 'group-a', 'items' => [['order' => 1, 'value' => 'a1'], ...]],
    //    ['order' => 2, 'value' => 'group-b', 'items' => [...]]
    // ]
}

The @sortable directive enables Sortable.js on a Livewire element. It automatically handles the synchronization of item order back to your Livewire component.

Key Features:

• Automatic Data Sync: When sorting finishes, it calls the Livewire method specified in the directive (e.g., @sortable('reorder')) with an array of objects containing order and value.
• Item Identification: Items must be marked with the attribute wire:sortable.item to be draggable.
• Handles: If an element inside an item has the attribute wire:sortable.handle, it will act as the drag handle.
• Configuration: You can pass custom Sortable.js options via the wire:sortable.options attribute as a JSON string.
• Grouping: Use the wire:sortable attribute on the container to define a group name, allowing items to be moved between containers with the same group name.

<!-- HTML Template -->
<ul wire:sortable="reorder" wire:sortable="my-group">
    <li wire:sortable.item="1">Item 1</li>
    <li wire:sortable.item="2">Item 2</li>
</ul>

<!-- Livewire Component Method -->
public function reorder($items)
{
    // $items is an array of ['order' => 1, 'value' => '1']
}