On laravel/livewire site I try to implement Drag and drop with Livewire example from
https://www.twilio.com/en-us/blog/implement-drag-drop-laravel-livewire example.

with component app/Livewire/Admin/SocialMediasEditor.php :

<?php

namespace AppLivewireAdmin;

use AppModelsSocialMedia;
use LivewireComponent;

class SocialMediasEditor extends Component
{
//    public $selectedPermissions = [1,3];
    public $socialMedias = [];

    public function render()
    {
        $this->socialMedias = SocialMedia::query()->orderBy('order'/*, 'desc'*/)->get();
        return view('livewire.admin.social-medias-editor');
    }

    public function updateSocialMediaOrder($socialMedias)
    {
        dd($socialMedias);
        foreach ($socialMedias as $socialMedia) {
            SocialMedia::whereId($socialMedia['value'])->update(['order' => $socialMedia['order']]);
        }
    }

    public function removeSocialMedia($id)
    {
        SocialMedia::whereId($id)->delete();
    }
}

and template :

<div  id="social_medias_editor_admin_page_container">
    <div class="shadow-xl rounded p-10 w-[40%] mx-auto">
        <ul wire:sortable="updateSocialMediaOrder" >
            @foreach ($socialMedias as $socialMedia)
                <li wire:sortable.item="{{ $socialMedia->id }}" wire:key="social-media-{{ $socialMedia->id }}"
                    class="flex justify-between cursor-col-resize ">
                    <div class="my-4 w-full flex justify-between p-3">
                        <span wire:sortable.handle class="flex cursor-pointer">
                            {{ $socialMedia->id }}=>{{ $socialMedia->name }}
                        </span>
                        <button wire:click="removeSocialMedia({{ $socialMedia->id }})">Remove</button>
                    </div>
                </li>
           @endforeach
        </ul>
    </div>
</div>

I see some restricted dragging when I try to make dragging in ny browse(Google Chrome Version 124.0.6367.118 (Official Build) (64-bit)) on kubuntu 22.04 :

But action updateSocialMediaOrder is not called…

In layout resources/views/components/layouts/admin.blade.php file I gave the lib added :

...
<main class="admin_page_container_wrapper z-20 " class="overflow-y-scroll"  wire:scroll>
    {{ $slot }}
</main>

<footer class="w-full" style="height: 50px !important;">
    @livewire('admin.admin-footer')
</footer>

@livewireScripts
@stack('scripts')
@livewire('wire-elements-modal')

<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>

</body>
</html>

<!--

@persist('scrollbar')

And I have no any errors in browser’s console with this lib…

Also I tried and failed in Firefox and Konquerer…

How to fix it ?

"laravel/framework": "^10.48.7",
"tailwindcss": "^3.4.1",
"livewire/livewire": "^3.4.10",

Thanks in advance!