omow/assets/controllers/sortable_controller.js

import { Controller } from "@hotwired/stimulus";

import Sortable from 'sortablejs'
export default class extends Controller {
    connect() {
        this.sortable = Sortable.create(this.element, {
            group: 'shared',
            sort: this.data.get('sortable') ?? false,
            filter: '.title',
            delay: 500, // time in milliseconds to define when the sorting should start
	        delayOnTouchOnly: true,
            onEnd: this.end.bind(this)
        });
    }

    end(event) {
        const filmId = event.item.dataset.id;
        const fromList = event.from.classList.contains('user-list') ? 'user' : 'common';
        const toList = event.to.classList.contains('user-list') ? 'user' : 'common';
        const oldIndex = event.oldIndex
        const newIndex = event.newIndex
        const order = this.sortable.toArray();

        console.log(oldIndex, newIndex)
        console.log(order)

        fetch(this.data.get('url'), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ filmId: filmId, fromList: fromList, toList: toList, oldIndex: oldIndex, newIndex: newIndex, order: order })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                console.log('Liste updated successfully');
            } else {
                console.error('Failed to update list');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
        ;
    }
}