### Installing Livewire Sortable.js via CDN

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This snippet demonstrates how to include the `livewire-sortablejs` library in your project using a Content Delivery Network (CDN). This method is suitable for quick integration without a build step, directly linking to the distributed JavaScript file.

```HTML
<script src="https://unpkg.com/@wotz/livewire-sortablejs@1.0.0/dist/livewire-sortable.js"></script>
```

--------------------------------

### Installing Livewire Sortable.js via NPM

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This command installs the `livewire-sortablejs` package using npm, saving it as a development dependency. This is the recommended approach for projects utilizing a JavaScript build system, allowing for bundling and dependency management.

```Bash
npm install @wotz/livewire-sortablejs --save-dev
```

--------------------------------

### Livewire Method Data Structure for Single Group Sort

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This PHP snippet shows the array structure received by the Livewire method (e.g., `updateTaskOrder`) when items in a single draggable list are reordered. Each element in the array represents an item with its new `order` (starting at 1) and its `value` (the item's identifier).

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

--------------------------------

### Building Project Assets (Bash)

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This command is used to build the project's assets, typically frontend resources like JavaScript and CSS, as part of the development or deployment process. It relies on `npm` to execute a predefined build script.

```bash
npm run build
```

--------------------------------

### Importing Livewire Sortable.js in JavaScript

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

These JavaScript snippets show how to import the `livewire-sortablejs` package into your application's bundle using either ES module syntax (`import`) or CommonJS syntax (`require`). This makes the library available for use in your frontend code, typically within a main JavaScript file.

```JavaScript
import '@wotz/livewire-sortablejs';

// or

require('@wotz/livewire-sortablejs');
```

--------------------------------

### Implementing Nested Draggable Groups and Items with Livewire Blade

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This Blade template demonstrates how to create multiple draggable groups, each containing draggable items, using Livewire's `wire:sortable` and `wire:sortable-group` directives. It shows the application of `wire:sortable.item`, `wire:sortable.handle`, `wire:sortable-group.item-group`, and `wire:sortable-group.item` attributes for managing drag-and-drop functionality and order updates. Options for Sortable.js are also applied to customize animation.

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

--------------------------------

### Implementing Single Group Draggable List in Livewire Blade

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This Blade snippet illustrates how to create a single draggable list using `livewire-sortablejs`. It applies `wire:sortable` to the container, `wire:sortable.item` to each draggable item, and `wire:sortable.handle` for a specific drag handle. The `wire:sortable.options` attribute allows customizing Sortable.js behavior, such as animation duration.

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

--------------------------------

### Implementing Multiple Group Draggable Lists in Livewire Blade

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This Blade snippet demonstrates how to set up multiple interconnected draggable lists. It uses `wire:sortable-group` for the main container, `wire:sortable-group.item-group` for each list, and `wire:sortable-group.item` for individual draggable items. Options can be applied per group using `wire:sortable-group.options`.

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

--------------------------------

### Livewire Method Input for Draggable Item Order Update (PHP)

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This PHP array structure illustrates the data received by the Livewire method (e.g., `updateTaskOrder`) when an item is dragged and its order is updated. It provides the new order and identifier for each item within its respective group, along with the group's order and identifier, allowing for precise reordering logic.

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

--------------------------------

### Livewire Method Input for Draggable Group Order Update (PHP)

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This PHP array structure shows the data received by the Livewire method (e.g., `updateGroupOrder`) when a group is dragged and its order is updated. It contains the new order and identifier for each group, enabling the backend to persist the updated group sequence.

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

--------------------------------

### Livewire Method Data Structure for Multiple Group Sort

Source: https://github.com/wotzebra/livewire-sortablejs/blob/master/README.md

This PHP snippet illustrates the complex array structure passed to the Livewire method (e.g., `updateTaskOrder`) when items are dragged between or within multiple groups. It includes the order and value for each group, and nested arrays for the items within each group, detailing their new order and value.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.