sortable
sortable copied to clipboard
livewire
Alpine compatibility issues
Context
Alpine version: v3.9.0
Livewire version: v2.7.2
Sortable version: v0.1.0
Problem
When alpine is imported before this library it breaks and items can no longer be sorted.
minimal reproducible example:
resources/views/tasks.blade.php
<html>
<body>
<livewire:tasks />
@livewireScripts
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>
</body>
</html>
resources/views/livewire/task.blade.php
<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>
app/http/livewire/Tasks.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Tasks extends Component
{
public $tasks = [
['id' => 1, 'title' => 'Do dishes'],
['id' => 2, 'title' => 'Dust shelves'],
['id' => 3, 'title' => 'Wash the cat'],
];
public function render()
{
return view('livewire.tasks');
}
}
