PHPackages                             mkocansey/bladewind-sortable - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. mkocansey/bladewind-sortable

ActiveLibrary[Templating & Views](/categories/templating)

mkocansey/bladewind-sortable
============================

BladewindUI — Drag and drop sortable list component (powered by SortableJS)

v4.2.1(1mo ago)001MITPHP >=8.1

Since Jun 22Compare

[ Source](https://github.com/mkocansey/bladewind-sortable)[ Packagist](https://packagist.org/packages/mkocansey/bladewind-sortable)[ RSS](/packages/mkocansey-bladewind-sortable/feed)WikiDiscussions Synced 2w ago

READMEChangelogDependencies (3)Versions (2)Used By (1)

[![License](https://camo.githubusercontent.com/ead282baa36c95c0a46cca5c9f0404c81b70cd523f8d3949a9f7d5ea8570475a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6b6f63616e7365792f626c61646577696e64)](https://github.com/mkocansey/bladewind/blob/main/LICENSE) [![Packagist Version](https://camo.githubusercontent.com/8c70d7b2022ebb8f8835bc9d414041f705e225c09666ec5edd06a7f6e52a09c8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6b6f63616e7365792f626c61646577696e642d736f727461626c65)](https://packagist.org/packages/mkocansey/bladewind-sortable)

[![BladewindUI](https://camo.githubusercontent.com/2e5420b83a0b4ad1383e047b06317da183a0e71c7903e270e430ee215c32ac02/68747470733a2f2f626c61646577696e6475692e636f6d2f6173736574732f696d616765732f62772d6c6f676f2e706e67)](https://camo.githubusercontent.com/2e5420b83a0b4ad1383e047b06317da183a0e71c7903e270e430ee215c32ac02/68747470733a2f2f626c61646577696e6475692e636f6d2f6173736574732f696d616765732f62772d6c6f676f2e706e67)

Sortable
========

[](#sortable)

BladewindUI — Drag and drop sortable list component, powered by [SortableJS](https://sortablejs.github.io/Sortable/).

Installation
------------

[](#installation)

```
composer require mkocansey/bladewind-sortable
```

Or install the full library:

```
composer require mkocansey/bladewind
```

Usage
-----

[](#usage)

```

    Tomatoes
    Onions
    Garlic

```

### Attributes

[](#attributes)

AttributeTypeDefaultDescription`type``simple|shared``simple``shared` lists can exchange items with other lists in the same `group`.`group`string`null`Group name used by `shared` lists to know which lists can swap items.`clone`bool`false`Leave a copy behind when dragging an item into another (shared) list.`sortable`bool`true`Enable or disable sorting of items within the list.`hasHandle`bool`false`Drag items by a dedicated handle instead of the whole item surface.`handleIcon`string`bars-3`Heroicon name used for the drag handle when `hasHandle` is `true`.`filter`string`null`Space/comma separated class names whose items cannot be dragged.`multidrag`bool`false`Select (ctrl/cmd + click) and drag multiple items at once.`swap`bool`false`Swap items on drop instead of shifting them. Not combinable with `multidrag`.`animation`int`150`Reorder animation duration in milliseconds.`inputName`string`null`Renders a hidden `` with this name, kept in sync with the order as a JSON array. Submit it with your form.`onSorted`string`null`Name of a JS function called after each reorder as `(order, event)`. Useful for saving via AJAX.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

[](#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:

```

    @csrf

        @foreach($tasks as $task)
            {{ $task->title }}
        @endforeach

```

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:

```

    @foreach($tasks as $task)
        {{ $task->title }}
    @endforeach

    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 }),
        });
    }

```

**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

[](#sharing-items-between-two-lists)

```

    Apple
    Mango

    Banana

```

Documentation
-------------

[](#documentation)

Full documentation, live demos, and all available attributes are at **[bladewindui.com](https://bladewindui.com)**.

License
-------

[](#license)

MIT — see the [LICENSE](https://github.com/mkocansey/bladewind/blob/main/LICENSE) file.

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance90

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

45d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1946332?v=4)[Michael K. Ocansey](/maintainers/mkocansey)[@mkocansey](https://github.com/mkocansey)

---

Tags

laravelbladesortabledrag-and-droptailwindcssbladewindui

### Embed Badge

![Health badge](/badges/mkocansey-bladewind-sortable/health.svg)

```
[![Health](https://phpackages.com/badges/mkocansey-bladewind-sortable/health.svg)](https://phpackages.com/packages/mkocansey-bladewind-sortable)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)