Sortable doesn't works

#1

Hello everyone,

I try livewire/sortable plugin but I probably miss something because drag and drop doesn’t work at all.

So, I install livewire

composer require livewire/livewire

I added blade directives :

<livewire:styles />
...
<livewire:scripts />

I add this javascript :

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

follow the next steps :

npm install livewire-sortable --save-dev

Import the package in your bundle:

import 'livewire-sortable'
// Or.
require('livewire-sortable')

and finally used the simple example :

<ul wire:sortable="updateTaskOrder">
    @foreach ($tasks as $task)
        <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
            <h4 wire:sortable.handle>{{ $task->title }}</h4>
            <button wire:click="removeTask({{ $task->id }})">Remove</button>
        </li>
    @endforeach
</ul>

But nothing happens, please can you tell me where I took the wrong way ?

Thanks a lot !

#2

Hey @happytodev,

first of all, you don’t have to import the CDN and the NPM package, you only need one of them.

Also you have to import either the CDN or your bundled JS File AFTER “livewireScripts”, because the Plugin needs to have the Livewire object available on the window.

Hope this helps!

1 Like
#3

Thanks @maxeckel, I remove CDN package.
But this still unworking sadly, I don’t understand why. No error in console.

As you can see below, I think I followed the use steps :

  1. call livewire script
  2. call livewire-sortable after livewire script
  3. use wire:sortable, wire:sortable.item, wire:sortable.handle

in 4, I have a draggable-live-region sized by 1px by 1px, it’s normal ?

image
image885×918 58.1 KB

#4

After that, look below, if I click on the left (1), I can handle something (2), but nothing to do with, no drop zone available.

image
image811×448 13.3 KB

Could you help me again please, to understand where I’m wrong ?

Thanks a lot !
Fred

#5

Hey @happytodev,

by the code you posted it should work.

There won’t be any “dropzone” shown, the plugin will simply reorder the items. So when you have 2 or more sortable items, you should be able to pull one underneath another one and they then should reorder. But keep in mind, that you have to handle the actual reordering of your array on the server side yourself (updateTaskOrder) otherwise, the view will be rerendered after your sort and show the initial state.

#6

@maxeckel yes I know for the updateTaskOrder.
But for now, my problem is that doesn’t works :frowning:
I still investigating this :wink:

#7

@happytodev really strange.

I’ve spun up an working example for you using laravel playground.

1 Like
#8

Hi I have the same problem and I found out that I have to use the dropzone as well for it to be able to drag the tables tr

Hope this helps.