[bug] SortableJS + AlpineJS = x-for visual conflicts

[10YAR]

Hello,

I'm currently struggling on using SortableJS in a AlpineJS project. The problem is that when I drag an element, it does change the index values in the elements array, but visually, it stays the same.

This is how I init SortableJS :

document.addEventListener("DOMContentLoaded", () => {
    new Sortable(document.getElementById("sortableContainer"), {
      animation: 200,
      onStart: function (event) {
         Alpine.store("dashboard").saveOldIndex(event.oldDraggableIndex);
      },
      onEnd: function (event) {
        Alpine.store("dashboard").movePersonne(event.newDraggableIndex);
      }
    });
}); 

If you comment the Alpine.store functions, there's no bug anymore, but then the changed array isn't being saved.

Here's a codepen with the bug encountered : https://codepen.io/Aristy/pen/bGJWMxp

Thank you for your help

I tried without using a store (but a data), and it was worse.

[bennadel]

For what it's worth, I'm running into a similar issue. Though, I think the bug is on the Alpine.js side, not the Sortable.js side. If I just bind the Sortable to the DOM, everything works well. But, the moment I try to save the .toArray() of the Sortable back into the Alpine.js array, the DOM ordering seems to be completely random.

In my logging, the two in-memory lists align, and are correct (ie, the result of the drag-n-drop). However, the DOM (on the left) changes to some random state.

[bennadel]

Also, seems like there is a discussion over in Alpine.js issues: https://github.com/alpinejs/alpine/discussions/4157