asantibanez / laravel-blade-sortable

Custom Blade components to add sortable/drag-and-drop HTML elements in your apps.

Laravel Blade Sortable

Demo

Repo

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.

<x-laravel-blade-sortable::scripts/>
<script src="/js/app.js"></script>

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

The package provides 2 custom Blade components to enable sorting of DOM elements:

• laravel-blade-sortable::sortable
• laravel-blade-sortable::sortable-item

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.

<x-laravel-blade-sortable::sortable>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

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.

<x-laravel-blade-sortable::sortable
    as="ul" {{-- Will render an unordered list wrapper node --}}
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

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.

<x-laravel-blade-sortable::sortable
    component="custom-blade-component" {{-- Will render "x-custom-blade-component" --}}
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

Sortable Item

laravel-blade-sortable::sortable-item is used as the wrapper element for each item you want to enable sorting.

<x-laravel-blade-sortable::sortable>
    <x-laravel-blade-sortable::sortable-item sort-key="jason">
        Jason
    </x-laravel-blade-sortable::sortable-item>
    <x-laravel-blade-sortable::sortable-item sort-key="andres">
        Andres
    </x-laravel-blade-sortable::sortable-item>
    <x-laravel-blade-sortable::sortable-item sort-key="matt">
        Matt
    </x-laravel-blade-sortable::sortable-item>
    <x-laravel-blade-sortable::sortable-item sort-key="james">
        James
    </x-laravel-blade-sortable::sortable-item>
</x-laravel-blade-sortable::sortable>

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. 🔥

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

Looks dope, right? 👌

Advanced Usage

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.

<form>
    <x-laravel-blade-sortable::sortable
        name="sort_order"
    >
        {{-- Items here --}}
    </x-laravel-blade-sortable::sortable>
</form>

By adding a name props, the component internally adds hidden inputs for each one of the items' sort-key.

Pretty neat! 👌

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.

<x-laravel-blade-sortable::sortable
    name="dropzone"
    wire:onSortOrderChange="handleSortOrderChange"
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

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.

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

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.

<x-laravel-blade-sortable::sortable
    animation="1000"
    ghost-class="opacity-25"
    drag-handle="drag-handle"
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

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!

<x-laravel-blade-sortable::sortable
    group="people"
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

<x-laravel-blade-sortable::sortable
    group="people"
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

Enable/Disable sorting and/or 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.

<x-laravel-blade-sortable::sortable
    group="people"
    :allow-sort="false"
    :allow-drop="false"
>
    {{-- Items here --}}
</x-laravel-blade-sortable::sortable>

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Andrés Santibáñez
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

laravel-blade-sortable's Issues

Sort between groups, not inside

Hi Andres , thanks for everything, I was wondering if its possible to limit the sorting in a group it self, for example you can drag from A to B, but not change the positions in A itself, appreciate any help, thanks

Basically:

1. Allow from A to B
2. Don't allow from B to A
3. Don't allow sorting inside A
4. Allow sorting inside B

Drag handle

I have the following code for the drag handle:

    <x-laravel-blade-sortable::sortable
            animation="1000"
            ghost-class="opacity-25"
            drag-handle="drag-handle"
    >
            <x-laravel-blade-sortable::sortable-item sort-key="jason">
                Jason
                <div class="bg-red-100 drag-handle">
                    Drag
                </div>
            </x-laravel-blade-sortable::sortable-item>
            <x-laravel-blade-sortable::sortable-item sort-key="andres">
                Andres
                <div class="bg-red-100 drag-handle">
                      Drag
                </div>
            </x-laravel-blade-sortable::sortable-item>
            <x-laravel-blade-sortable::sortable-item sort-key="matt">
                Matt
                <div class="bg-red-100 drag-handle">
                    Drag
                </div>
            </x-laravel-blade-sortable::sortable-item>
            <x-laravel-blade-sortable::sortable-item sort-key="james">
                James
                <div class="bg-red-100 drag-handle">
                    Drag
                </div>
            </x-laravel-blade-sortable::sortable-item>
    </x-laravel-blade-sortable::sortable>

But you can now drag the element if you are outside the div of drag handle. I just want you to be able to move it only when you press the drag handle. Does the documentation say it can be done this way? Am I doing something wrong?

Nested sortables with Livewire event handling

Is there any way I could handle the wire:onSortOrderChange and know whether it has been move from one list to another?

how to skipRender on handleSortOrderChange?

I've a sortable group of 'current' and 'available' models. On the controller's handleSortOrderChange() I'm creating an attach list and a detach list to implement on submit. My problem is that the teo group's keep refreshing to the initial state af each call t ohandleSortOrderChange() ... how can i skip the render please?

nested livewire component issue when drag/drop from groupe to another

when I dont use the "formesm" component it work flawlessly.
but using it when I sort in the same div it work but when I drag to another div (groupe) it crash
index.js:32 Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
at new Component (index.js:32)
at onNodeAdded (index.js:476)
...
grpcard component view calling the formesm component

        <x-laravel-blade-sortable::sortable
            wire:key="{{$grp->id}}"
            name="{{$grp->id}}"
            group="people"     animation="700"
            ghost-class="opacity-50"
            wire:onSortOrderChange="handleSortOrderChange"
        >

        @if($grp->formes)
        @foreach($grp->formes as $forme)
                    <x-laravel-blade-sortable::sortable-item sort-key="{{$forme->id}}" wire:key="{{$forme->id}}">
                       <div class="w-2/4">

                           <livewire:formesm :forme="$forme" :key="$forme->id"></livewire:formesm>

                       </div>
                    </x-laravel-blade-sortable::sortable-item>

                @endforeach
            @endif

        </x-laravel-blade-sortable::sortable>
        </div>

formesm component : between two div just echo the $forme->prenom

{{$forme->prenom}}

Unable to render components in Laravel 7.x

When trying to render the components in Livewire, I throws:

syntax error, unexpected 'endif' (T_ENDIF), expecting end of file (View: /home/user/laravel/vendor/asantibanez/laravel-blade-sortable/resources/views/components/sortable-item.blade.php)

Livewire: 2.3.17
Laravel: 7.30.4

After further inspection, when I remove the <x-dynamic-component/> in the component's blade views, it was able to render properly.

<x-dynamic-component/> wasn't introduced until Laravel 8.x.

Maybe considering removing illuminate/support ^7.x in the composer.json

Alpine V3 error create

Hello, I have this error when using it
i am using laravel 9 alpinejs 3.10
and the latest development version of sortable.

with the alpine 2 version it works perfect, does anyone have a solution for this?

Handling Order Changes without live wire

Hey, I have noted that the documentation notes that the handleSortOrderChange is a method used with livewire, is there a way of catching that data when am not using Livewire?

Mobile Drag Function

Hi,
is there a touch Drag function? On a mobile device i cant sort my Items.

defer modifier is not working

I am trying to use the package with defer modifier and it does not work. I want to first sort all of my images and when I click the save button to send the sorted order to the server. This is to avoid many HTTP requests to server.

wire:onSortOrderChange.defer="handleOnSortOrderChange" // is not working

Is the defer modifier working? If not is it possible to achieve this behavior somehow?

allow-drag=true|false

Hi,

Would be nice to have allow-drag=true|false

This would disable dragging from the container.

For example I have lists A, B and C

I want to move items from A and B to C
I dont want to move items from C to anywhere

Laravel 10 support

As this project seems to be dead (sad because this package is pure gold!), have anyone forked this to work with Laravel 10?

Laravel 9 support

Hello,

I'm getting this when trying to update/install on laravel 9 project:

composer require asantibanez/laravel-blade-sortable
Using version ^1.3 for asantibanez/laravel-blade-sortable
./composer.json has been updated
Running composer update asantibanez/laravel-blade-sortable
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires asantibanez/laravel-blade-sortable ^1.3 -> satisfiable by asantibanez/laravel-blade-sortable[v1.3.0].
    - asantibanez/laravel-blade-sortable v1.3.0 requires illuminate/support ^7.0|^8.0 -> found illuminate/support[v7.0.0, ..., 7.x-dev, v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require.

You can also try re-running composer require with an explicit version constraint, e.g. "composer require asantibanez/laravel-blade-sortable:*" to figure out if any version is installable, or "composer require asantibanez/laravel-blade-sortable:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Get updated sort order for $from and $to groups?

Hey there, great package!
I'm wondering if I'm missing something -- is there a way to get the updated sort list for both the from and to groups when updating? I just see the new order and previous order for the target group I think

Alpine v3

It currently doesn't work with new version of Alpine. Is there any plans for alpine v3 support?

No data is passed

https://github.com/asantibanez/laravel-blade-sortable/issues/9#issuecomment-903175095

i use this from the example, but there is no data passed... all variables are empty except $name, $from, $to

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
}

Multiple drop zones

Hello,

The problem i'm having is to NOT have linked drop zones. I would like to have just 2 listings A and B.
You should not be able to drag item from A to B or from B to A

I have tried this with:

• do not use group param
• use different group params for A and B
• use group param for A, empty for B
• use group param for B, empty for A

Any ideas?

Edit:

I can return false from wire:onSortOrderChange function to disable the dropping, but would be nice to disable this from UI also

skip/disable any of the item from the list

Is there any way to skip or disable any of the item from the sortable list?

May be something like?

Disable Sortable when displaying a Livewire modal

Hi,

I am displaying a full screen modal on top of a sortable list. However, when the modal is displayed, the underlying list can still be sorted.

It would be good if the package could support the filter option available in SortableJS, so I can at least add a temporary class while the model is being disabled. Even better would be to allow developers to specify all the config values available in SortableJS 🙏. Thanks.

Best,
Kam

Deleting sortable-item

Hello,

I have multiple sortable lists:

group 1

• team 1
• team 2
• team 3

group 2
(no teams)

group 3
(no teams)

sample code:

@foreach ($groups as $group)
                    
                    <x-laravel-blade-sortable::sortable
                        group="teams"
                        name="{{ $group->id }}"
                        wire:onSortOrderChange="groupChanged"
                    >
                        @foreach ($group->teams as $team)
                            <x-laravel-blade-sortable::sortable-item
                                sort-key="{{ $team->id }}"
                            >
                                <div>
                                    {{ $team->name }}
                                </div>
                            </x-laravel-blade-sortable::sortable-item>
                        @endforeach
                    </x-laravel-blade-sortable::sortable>
                @endforeach

I have a function that can remove a group. ($groups is updated)

If I remove the group2, then each groups after that breaks... for example when group 2 is removed and i try to move a team from group 1 to group 3
groupChanges will receive the following params:

0: ["..."]
1: ["..."]
2: "group 2" <- this is already deleted, should be group 1
3: "group 1"
4: "group 3"

Any ideas whats wrong?

Unable to call component method. Public method [__v_raw] not found on component:

I am getting error when I drag and drop a sortable item.

When I remove wire:onSortOrderChange="handleOnSortOrderChanged", it works. Method was properly added to livewire component.

Anyone knows how to fix it? I am using laravel 9.11 version. PHP 8.0.1

$dom.getAttribute is not a function

Hi, trying to use this with a livewire component.

                @foreach ($p1->chunk(4) as $chunk)
                <div class="row" style="background-color: #8cdba9; margin-bottom: 7px; padding: 10px;">
                    <x-laravel-blade-sortable::sortable>
                        @foreach ($chunk as $item)
                          <x-laravel-blade-sortable::sortable-item as='label' class="checkbox-inline col-3" sort-key="{{$item->order_position}}"  drag-handle="drag-handle">
                            {{-- <label class="checkbox-inline col-3"> --}}
                                <input type="checkbox" value="1" id="item{{$item->id}}" @if (in_array($item->id, $currentConfigs)) checked @endif wire:click="updateConfig({{ $item->id }})"> {!! $item->value !!}
                            {{-- </label> --}}
                        </x-laravel-blade-sortable::sortable-item>
                        @endforeach
                    </x-laravel-blade-sortable::sortable>
                    </div>
                @endforeach

When I do this and try to click my element, the console prints this error:

I have my scripts in the file listed in this order:
@livewire
/js/app.js
and lastly the x-laravel-blade-sortable::scripts/

I have installed alpine and sortable through NPM and run npm dev to compile the scripts (within Laravel) after including/requiring the libraries in the app/bootstrap.js files.

What is causing this error?

Submit droped items (in order)

Hello,

How to store/submit droped items (in order)?

DRAG FROM:

	<x-laravel-blade-sortable::sortable group="orders">
	   @foreach($orders as $order)
	      <x-laravel-blade-sortable::sortable-item as="div" sort-key="{{ $order->id }}" class="bg-theme-gray-500 my-1 px-5 py-5 text-white">{{ $order->id }}</x-laravel-blade-sortable::sortable-item>
	   @endforeach
	</x-laravel-blade-sortable::sortable>

DROPED IN:

<form method="POST" action="{{ route('selected_orders.update', $workday->id) }}" class="py-6 px-10">
	@csrf
	@method('PATCH')
	<x-laravel-blade-sortable::sortable group="orders" name="sort_order">
          <!--- DROP ZONE --> 
	</x-laravel-blade-sortable::sortable>

	<button type="submit">Submit</button>
</form>

append / prepend when drop whilst allow-sort is false

hi,
Could i ask for an option to append / prepend for when dropping whilst allow-sort is false please?
It seems strange to be able to drop anywhere on an element if sorting is not allowed.

thanks.