Sorting not properly working

[vahnmarty]

See this screencast: https://www.loom.com/share/84679eebf4c34e43b6ea4875aa7aa126

I created 10 <li> then I tried dragging #10 to #2 position, but after that, the sequence just resets.

<div style="display: flex; justify-content: center;">
    <ul wire:sortable="updateTaskOrder">
        @foreach (range(1, 10) as $n)
        <li wire:sortable.item="{{ $n }}"
            wire:key="task-{{ $n }}">
            <h4 wire:sortable.handle>{{ $n }}</h4>
        </li>
        @endforeach
    </ul>
</div>
@push('after-scripts')
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>

@endpush

[shahabbasian]

I also saw this problem I put the CDN in the layout and under @livewireScripts and it worked

layouts/app.blade.php

`@livewireScripts

`

[bkilshaw]

I'm running in to the same issue here; whenever I sort the list briefly accepts the new position, and then resets to the original position. This happens regardless of what my function is doing (even if it's empty) in the updateFieldOrder wortable method. Has anyone found a solution?

<div class="space-y-6" wire:sortable="updateFieldOrder">
    @forelse($fields as $key => $field)
        <div class="w-full sm:flex align-middle items-center gap-4" wire:sortable.item="{{ $field->id }}" wire:key="field-{{$field->id}}">
            <div class="sm:flex-none">
                <div class="flex items-center align-middle cursor-move" wire:sortable.handle>
                    <div class="inline-block mr-2 text-gray-500">
                        <x-heroicon-o-selector />
                    </div>
                    Question {{ $loop->iteration }}
                </div>
            </div>
            <div class="sm:flex-grow flex align-middle items-center gap-4">
                <div class="flex-grow">
                    <x-input wire:model.defer="fields.{{ $key }}.question" type="text" class="w-full" placeholder="Write question here" />
                    <x-input-error field="fields.{{ $key }}.question" />
                </div>

                <div>
                    <button wire:loading.attr="disabled" type="button" wire:click="deleteField({{$field->id}})" class="inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" tabindex="-1">
                        <x-heroicon-s-trash class="h-4 w-4" />
                    </button>
                </div>
            </div>
        </div>
    @empty
        <div class="pt-4 flex align-middle justify-center">
            <x-heroicon-o-information-circle class="h-6 w-6 inline-block mr-3 text text-gray-600" />
            No questions have been added yet. Get started by clicking the "Add Question" button below.
        </div>
    @endforelse
</div>

[whoisthisstud]

Same issue. Has no one found a solution?