Search code examples
javascriptlaravellaravel-livewire

Why Drag and drop with Livewire example doesa not work on my site?

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 App\Livewire\Admin;

use App\Models\SocialMedia;
use Livewire\Component;

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 :

enter image description here

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!

Solution

  • Instead of using the CDN method of importing sortable, I would use the NPM method. Using the the NPM method, and importing the library in your app.js file will give you global access to the library, while your current method does not give the component access. You can use the CDN method within the component however if you needed.