x-sort:handle does not work if defined in a template

[enyancc]

in following example x-sort:handle won't be picked up by x-sort directive and the whole item would be draggable.

<div x-sort>
                <template x-for="item in items" :key="item.id">
                    <div  x-sort:item="item.id">
                        <span x-text="item.text"></span>
                        <span x-sort:handle>
                            -
                        </span>
                    </div>
                </template>
                
</div>

related to the check in packages/sort/src/index.js#L28, because no actual item exist at the time of initialisation.

can be patched with adding hidden tag with [x-sort:handle] outside of template.

[SimoTod]

You can also pass the configuration on the main tag instead of creating a fake hidden element: https://alpinejs.dev/plugins/sort#custom-configuration

<div x-sort x-sort:config="{ handle: '[x-sort:handle]' }">

[SimoTod]

I've created #4483 to support it 👍