How to get new group/status of dragged item in x-sort?

[shaimaHamila]

Using x-sort with groups — how can I get the new group/status (like todo, pending, etc.) of the dragged item after it's dropped into a new list? Can't figure it out

code:

      <div x-data="{
                      handle(item, position) {
                          console.warn('Could not determine statuses', { item, position });
                          return;
                      }
                  }" x-sort="handle($item, $position)" x-sort:group="tasks"
                      class="task-column bg-amber-300" data-status="{{ $key }}"
                      id="column-{{ $key }}">
                      @foreach ($tasks->where('status', $key)->sortBy('order') as $task)
                          <div x-sort:item="{{ $task }}" wire:key="task-{{ $task->id }}"
                              id="task-{{ $task->id }}" class="p-2 cursor-pointer rounded border-2 bg-white mb-2"
                              wire:click="handleTaskDetails('{{ $task->id }}')" style="border-color: #bc9d2031;">
                              <!-- Task Content -->
                              <div class="flex justify-between items-start">
                                      {{ $task->title }}
     </div>
 @endforeach
</div>

[shaimaHamila]

🧩 Alpine.js Drag & Drop in Livewire — Fixing group not giving column key
After two full days of debugging, here's the working solution to get the actual column key (like "TODO", "IN_PROGRESS", etc.) when sorting tasks with Alpine's x-sort.

✅ Problem:
Alpine’s x-sort:group="tasks" just gives a group name ("tasks") — not the specific column key from your data (e.g., TODO, DONE).
You want to know which column the task was dropped into.

✅ Solution:
Use a data-status="{{ $key }}" on the column container, and grab it via closest('[data-status]') in your Alpine handle() function.

💡 Final Working Code
blade

<!-- Task Cards -->
<div 
   x-data="{
       handle(item, position) {
           const column = $el.closest('[data-status]').getAttribute('data-status');
           console.warn('Success! Drag info:', { item, position, column });

           // Call your Livewire method here
           @this.call('reorderTask', item.id, position, column);
       }
   }"
   x-sort="handle($item, $position)" 
   x-sort:group="tasks"
   class="task-column bg-amber-300" 
   data-status="{{ $key }}"
   id="column-{{ $key }}"
>
   @foreach ($tasks->where('status', $key)->sortBy('order') as $task)
       <div 
           x-sort:item="{{ $task }}" 
           wire:key="task-{{ $task->id }}"
           id="task-{{ $task->id }}"
           class="p-2 cursor-pointer rounded border-2 bg-white mb-2"
           wire:click="handleTaskDetails('{{ $task->id }}')" 
           style="border-color: #bc9d2031;"
       >
           {{ $task->title }}
       </div>
   @endforeach
</div>