x-sort plugin with not relative $position

[incmnsz-emmanuel]

Is there a way to handle the position of the actual element, not the relative one that the x-sort plugin gave us. What I mean is something like this (a laravel's livewire usage), where each item has it's own default position from the backend (already defined in the database)

<ul x-sort="console.log($item, $position)">
  @foreach($items->sortBy('position') as $item)
    <li x-sort:item="'{{$item->id}}'" x-sort:position="{{$item->position}}">
       {{-- ... --}}
    </li>
  @endforeach
</ul>

The issue comes because let's say we return two elements in the foreach and the first element has a default backend position of 2 and the second one has a position of 4. So by using the x-sort relative positon each elements is sorted by its default positions of 0 and 1

Eius.odit.impedit.-.Perfil.1_.Microsoft.Edge.2025-04-02.14-46-47.mp4

[ekwoka]

What exactly is it that you want? you can just put the original position on the struct itself...not totally sure what you're asking for. What should it do here?

[yeondevelope]

For sure, sorry for the delay, let me try to explain what was trying to get and and what I've done to solve this issue.

As you may notice my looped items have a pre-default position (in the database backend), so that means if I try to loop them over with the default x-sort Alpine's JS plugin $positions I would get an error in my backend.

For example let's say my default sorted array of items originally looks like this order:

• Item 1: Position 4
• Item 2: Position 6
• Item 3: Position 14

If I take the Alpine's JS $position to loop it over then the positions in the backend, instead of the real items position it would take the default one's (0, 1, 2, ...), and might be used by other items in the database, so I would get some error.

So I try to mange the Alpine's JS relative $position to find the elements in my backend position array. The next one is how I handle in my backend using Laravel's Livewire framework (Volt component)

new class extends Component {
  public ModelExample $modelExame;

  public function with(): void
  {
    return [
      'items' => $this->modelExample->sortBy('position')
      /*
        Returns Collection
        {
          ...\ModelExample { position: 4 }
          ...\ModelExample { position: 6 },
          ...\ModelExample { position: 12 },
        }
      */
    ]; 
  }

  public function handleSort($itemID, $nextPosition){
    // Collection to Array
    $arr = $this->with()['items']->values()
    /*
      Returns an Array (with the desired relative position)
      [
        ...\ModelExample { position: 4 }
        ...\ModelExample { position: 6 },
        ...\ModelExample { position: 12 },
      ]
    */

    // Finding the current item
    $currentItem;
    foreach($arr as $item){
      if($item->id === $itemID){
        $currentItem = $item;
        break;
      }
    }

    // Finding the next item (here I use the Alpine's relative position)
    $nextItem = $arr[$nextPosition];

    // Finding current real position & next position
    $currentPosition = $currentItem->position;
    $nextPosition = $nextPosition->position;

    // Temporary change the $currentItem position
    $currentItem->update(['position' => -1]);

    // Set the $nextItem the $currentPosition
    $nextItem->update(['position' => $currentPosition]);

    // Reset the $currentItem position with the $nextPosition;
    $nextItem->update(['position' => $nextPosition]);
  }
}

<ul x-sort="$wire.handleSort($item, $position)">
  @foreach($items as $item)
    <li x-item="'{{$item->id}}'">{{-- ... --}}</li>
  @endforeach
</ul>

Now with this items conversion from a collection to array I can use the array's relative position from the Alpine's JS x-sort relative $position.

Hope this may works for other applied scenarios, and suggest for a way to customize the default Alpine's JS x-sort plugin relative $position. 😁

[ekwoka]

Just make it be a separate value...

One for the render position, the other for the DB position...