README

Sortable

BladewindUI — Drag and drop sortable list component, powered by SortableJS.

Installation

composer require mkocansey/bladewind-sortable

Or install the full library:

composer require mkocansey/bladewind

Usage

<x-bladewind::sortable>
    <x-bladewind::sortable.item>Tomatoes</x-bladewind::sortable.item>
    <x-bladewind::sortable.item>Onions</x-bladewind::sortable.item>
    <x-bladewind::sortable.item>Garlic</x-bladewind::sortable.item>
</x-bladewind::sortable>

Attributes

The sortable.item component accepts a value attribute (rendered as data-id) — this is the identifier reported in the order array, e.g. your model id.

Saving the order

Submitting with a form. Give the list an inputName and each item a value. A hidden input is kept in sync with the order and submitted like any other field:

<form method="post" action="/tasks/reorder">
    @csrf
    <x-bladewind::sortable input-name="task_order" has-handle="true">
        @foreach($tasks as $task)
            <x-bladewind::sortable.item :value="$task->id">{{ $task->title }}</x-bladewind::sortable.item>
        @endforeach
    </x-bladewind::sortable>
    <x-bladewind::button can_submit="true" label="Save order"/>
</form>

On the server the field arrives as a JSON array of ids in their new order:

$order = json_decode($request->input('task_order')); // ["30", "10", "20"]

foreach ($order as $position => $id) {
    Task::where('id', $id)->update(['position' => $position]);
}

Saving with AJAX (no form submit). Point onSorted at a JS function that receives the order array:

<x-bladewind::sortable :on-sorted="'saveOrder'">
    @foreach($tasks as $task)
        <x-bladewind::sortable.item :value="$task->id">{{ $task->title }}</x-bladewind::sortable.item>
    @endforeach
</x-bladewind::sortable>

<script>
    function saveOrder(order, event) {
        fetch('/tasks/reorder', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ task_order: order }),
        });
    }
</script>

Reading the order yourself. Each list is exposed as a JS variable named after its name, so you can call SortableJS methods directly — e.g. task_list.toArray() returns the current order at any time.

Sharing items between two lists

<x-bladewind::sortable type="shared" group="fruits">
    <x-bladewind::sortable.item>Apple</x-bladewind::sortable.item>
    <x-bladewind::sortable.item>Mango</x-bladewind::sortable.item>
</x-bladewind::sortable>

<x-bladewind::sortable type="shared" group="fruits">
    <x-bladewind::sortable.item>Banana</x-bladewind::sortable.item>
</x-bladewind::sortable>

Documentation

Full documentation, live demos, and all available attributes are at bladewindui.com.

License

MIT — see the LICENSE file.