x-sort handle breaks with x-for

[corsedag]

Very excited about the new x-sort plugin.

The example provided in the documentation works great, only the hyphen is draggable:

<ul x-sort>
    <li>
        <span x-sort:handle> - </span>foo
    </li>
    <li>
        <span x-sort:handle> - </span>bar
    </li>
    <li>
        <span x-sort:handle> - </span>baz
    </li>
</ul>

However, when using x-for, the handle is not properly binding and the entire row can be clicked and dragged when the behavior that I want is for just the hyphen to be draggable.

<ul
    x-data="{ rows: ['foo', 'bar', 'baz'] }"
    x-sort
>
    <template x-for="row in rows">
        <li>
            <span x-sort:handle> - </span><span x-text="row"></span>
        </li>
    </template>
</ul>

Perhaps there's a workaround by adding some custom config but I have not explored this yet.

[SimoTod]

I don't think x-for and z-sort are fully compatible yet (There are odd behaviours when adding a new element to the list since the order in x-for doesn't stay in sync with x-sort).

Re the handle, it won't work because the plugin looks for a child element with the x-sort:handle attribute (https://github.com/alpinejs/alpine/blob/main/packages/sort/src/index.js#L23C46-L23C63) but when the plugin runs, the x-for item haven't been generated (querySelector doesn't drill inside the template) so it just initialise the plugin with the normal behaviour.

As a workaround for now, you can add x-sort:handle to the template tag.

UPDATE:
You can also manually force it by doing

<ul
    x-data="{ rows: ['foo', 'bar', 'baz'] }"
    x-sort:config="{ handle: '[x-sort\\:handle]' }"
    x-sort
> 

[corsedag]

Brilliant! Thank you!

[docdunning]

Thanks, @SimoTod - I also encountered this problem.

In my case, the sortable items are in templates that are added to the DOM by clicking buttons. x-sort:handle is not working, but using x-sort:config to define the handle works fine.

I'm guessing that x-if templates are also affected.

I also tried using x-sort:config with the filter setting, to prevent sort/dragging being triggered on other parts of the sorted item. But this solution is much preferable.

[dimitri-koenig]

See my solution here: #4157 (comment)