PHPackages marshmallow/laravel-blade-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. [Utility & Helpers](/categories/utility) 4. / 5. marshmallow/laravel-blade-sortable AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) marshmallow/laravel-blade-sortable ================================== Custom Blade components to add sortable/drag-and-drop HTML elements in your apps v2.2.0(1y ago)225.9k1MITPHPPHP ^8.0CI failing Since Feb 5Pushed 1y ago1 watchersCompare [ Source](https://github.com/marshmallow-packages/laravel-blade-sortable)[ Packagist](https://packagist.org/packages/marshmallow/laravel-blade-sortable)[ Docs](https://github.com/asantibanez/laravel-blade-sortable)[ RSS](/packages/marshmallow-laravel-blade-sortable/feed)WikiDiscussions master Synced yesterday READMEChangelog (3)Dependencies (3)Versions (11)Used By (0) Laravel Blade Sortable ====================== [](#laravel-blade-sortable) [![Latest Version on Packagist](https://camo.githubusercontent.com/29b3329b99ae4d59d9666b9ed3ffd619821f0f22449cc8f9ed3b2b0495797723/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6173616e746962616e657a2f6c61726176656c2d626c6164652d736f727461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/asantibanez/laravel-blade-sortable)[![Total Downloads](https://camo.githubusercontent.com/a30b2743f101deafcade57e36549477d41e66b6a7f05eb85342b924c90d50eff/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6173616e746962616e657a2f6c61726176656c2d626c6164652d736f727461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/asantibanez/laravel-blade-sortable) [![Laravel Blade Sortable](https://camo.githubusercontent.com/6e7165d0fb5ab70c842b5a1afaf129bc9701500c653d3c02e7ae17a275f19738/68747470733a2f2f6c61726176656c2d6f672e6265796f6e64636f2e64652f4c61726176656c253230426c616465253230536f727461626c652e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6173616e746962616e657a2532466c61726176656c2d626c6164652d736f727461626c65267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d437573746f6d2b426c6164652b636f6d706f6e656e74732b746f2b6164642b736f727461626c65253246647261672d616e642d64726f702b48544d4c2b656c656d656e74732b696e2b796f75722b61707073266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d6d656e75)](https://camo.githubusercontent.com/6e7165d0fb5ab70c842b5a1afaf129bc9701500c653d3c02e7ae17a275f19738/68747470733a2f2f6c61726176656c2d6f672e6265796f6e64636f2e64652f4c61726176656c253230426c616465253230536f727461626c652e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6173616e746962616e657a2532466c61726176656c2d626c6164652d736f727461626c65267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d437573746f6d2b426c6164652b636f6d706f6e656e74732b746f2b6164642b736f727461626c65253246647261672d616e642d64726f702b48544d4c2b656c656d656e74732b696e2b796f75722b61707073266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d6d656e75) Demo ---- [](#demo) [Repo](https://github.com/asantibanez/laravel-blade-sortable-demo) [![demo](https://github.com/asantibanez/laravel-blade-sortable/raw/master/demo.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/demo.gif) Installation ------------ [](#installation) You can install the package via composer: ``` composer require asantibanez/laravel-blade-sortable ``` After the package is installed, make sure to add `laravel-blade-sortable::scripts`components next to your other scripts. ``` ``` Requirements ------------ [](#requirements) Package requires `SortableJs` and `AlpineJs` to be installed in your application in order to enable sorting. Reach out to their respective documentation in order to set them up. > NOTE: `SortableJs` must be available at the `window` object level in Javascript. To do this, import the library using > > `window.Sortable = require('sortablejs').default` > > or use any other similar approach Usage ----- [](#usage) The package provides 2 custom Blade components to enable sorting of DOM elements: - `laravel-blade-sortable::sortable` - `laravel-blade-sortable::sortable-item` ### Sortable [](#sortable) `laravel-blade-sortable::sortable` is used as the wrapper element for your sortable/drag-and-drop items. It must be used to enclose the children it will enable sortable. ``` {{-- Items here --}} ``` By default, the component renders a "div" as the wrapper node. You can customize this behavior by passing an `as` property to render the type of node you need. ``` {{-- Items here --}} ``` > NOTE: Any other attribute you pass along (class, id, alt, etc) will be added to the element If you would like to use custom Blade component as a wrapper node, you can also do this by passing a `component` property. ``` {{-- Items here --}} ``` ### Sortable Item [](#sortable-item) `laravel-blade-sortable::sortable-item` is used as the wrapper element for each item you want to enable sorting. ``` Jason Andres Matt James ``` > NOTE: Similar to `laravel-blade-sortable::sortable`, you can pass a `as`or `component` property to render the type of node or custom component you desire. > > NOTE: Extra attributes like class, id, alt, etc can be passed along to and will be added to the item node. As you may have noticed, every `laravel-blade-sortable::sortable-item`requires a `sort-key` property. This property will be used to keep track of the ordering of the elements. Should be unique too. And that's it. You have now a sortable list rendered by Laravel Blade without any custom Javascript. 🔥 [![basic](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/basic.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/basic.gif) That example looks awful though 😅. Because you can pass in any custom component or styling directly, you can customize the wrapper and item nodes according to your needs. Here's another example using TailwindCSS ❤️ and custom components [![custom-component](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/custom-component.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/custom-component.gif) Looks dope, right? 👌 Advanced Usage -------------- [](#advanced-usage) ### As Form Input [](#as-form-input) The sort order of elements can be used alongside other input fields on form submissions. To enable this behavior, just pass a `name` prop to a `laravel-blade-sortable::sortable`component. The `name` should be the name of the input in your form. ``` {{-- Items here --}} ``` By adding a `name` props, the component internally adds hidden inputs for each one of the items' `sort-key`. [![as-form-input](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/as-form-input.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/as-form-input.gif) Pretty neat! 👌 ### With Livewire [](#with-livewire) Into Livewire? It's awesome. We know. You can use this package within your Livewire views and use the sorting information in the component. To get "sort change" updates in your Livewire component, just add the attribute `wire:onSortOrderChange` to a `x-laravel-blade-sortable::sortable`component. Adding this attribute will hook the Livewire component when a sorting event happens and will call the specified method/callback. ``` {{-- Items here --}} ``` In the example above, every time your items are sorted, the `handleSortOrderChange`method will be called passing as argument an array with your items' `sort-key` in the current order. [![livewire](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/livewire.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/livewire.gif) Extra info is passed along too, so you can check extra data when processing the sort order ``` public function handleOnSortOrderChanged($sortOrder, $previousSortOrder, $name, $from, $to) { // $sortOrder = new keys order // $previousSortOrder = keys previous order // $name = drop target name // $from = name of drop target from where the dragged/sorted item came from // $to = name of drop target to where the dragged/sorted item was placed } ``` ### Customization [](#customization) To support some advanced features of SortableJs, it is possible to pass the following props to a `laravel-blade-sortable::sortable` component: - `animation`: milliseconds it takes to run the sorting animation. `150` is the default value. - `ghost-class`: class added to the dragged object during sort. Default is `null`. Must be 1 class only. - `drag-handle`: class name that will be used as the handle for dragging. Only the DOM element that has that class can enable sorting. ``` {{-- Items here --}} ``` [![customization](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/customization.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/customization.gif) ### Multiple Drop Zones [](#multiple-drop-zones) Wanting to have different drop zones to drag/drop/sort elements? We have you covered. 😎 Just add a `group` string prop to a `laravel-blade-sortable::sortable` component. Add the same prop to another `laravel-blade-sortable::sortable` component on the same page and BOOM! Done! ``` {{-- Items here --}} {{-- Items here --}} ``` [![drag-drop](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/drag-drop.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/drag-drop.gif) ### Enable/Disable sorting and/or drop [](#enabledisable-sorting-andor-drop) Use `:allow-sort=true|false` and `:allow-drop=true|false` to `x-laravel-blade-sortable::sortable` components to enable/disable sorting and/or drop of elements. Both defaults to `true`. ``` {{-- Items here --}} ``` [![disable-sort-drop](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/disable-sort-drop.gif)](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/disable-sort-drop.gif) ### Testing [](#testing) ``` composer test ``` ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Andrés Santibáñez](https://github.com/asantibanez) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 39 — LowBetter than 86% of packages Maintenance43 Moderate activity, may be stable Popularity25 Limited adoption so far Community11 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 72.4% of commits — single point of failure 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 Every ~162 days Recently: every ~353 days Total 10 Last Release 458d ago Major Versions v1.3.0 → v2.0.02022-03-15 PHP version history (4 changes)v1.0.0PHP ^7.0|^8.0 v1.0.2PHP ^7.2|^7.3|^7.4|^8.0 v2.0.0PHP ^8.0|^8.1 v2.1.0PHP ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/be33d2624e24c516e73892b0929447cc762f3622c024ab8d0d2a59042e5d2c7f?d=identicon)[marshmallow](/maintainers/marshmallow) --- Top Contributors [![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (21 commits)")[![stefvanesch](https://avatars.githubusercontent.com/u/46725619?v=4)](https://github.com/stefvanesch "stefvanesch (5 commits)")[![LTKort](https://avatars.githubusercontent.com/u/2412670?v=4)](https://github.com/LTKort "LTKort (3 commits)") --- Tags asantibanezlaravel-blade-sortable ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/marshmallow-laravel-blade-sortable/health.svg) ``` [![Health](https://phpackages.com/badges/marshmallow-laravel-blade-sortable/health.svg)](https://phpackages.com/packages/marshmallow-laravel-blade-sortable) ``` ### Alternatives [asantibanez/laravel-eloquent-state-machines State machines for your Laravel Eloquent models 568592.8k](/packages/asantibanez-laravel-eloquent-state-machines)[asantibanez/livewire-calendar Laravel Livewire calendar component 96883.3k1](/packages/asantibanez-livewire-calendar)[asantibanez/livewire-select Livewire dropdown select component 520138.4k2](/packages/asantibanez-livewire-select)[asantibanez/laravel-blade-sortable Custom Blade components to add sortable/drag-and-drop HTML elements in your apps 41152.2k](/packages/asantibanez-laravel-blade-sortable)[asantibanez/livewire-resource-time-grid Laravel Livewire resource time grid component 2298.1k](/packages/asantibanez-livewire-resource-time-grid)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 255.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)