[bug] SortableJS + AlpineJS = x-for visual conflicts
10YAR opened this issue · 0 comments
10YAR commented
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/10YAR/pen/bGJWMxp
Thank you for your help
I tried without using a store (but a data), and it was worse.