lucent-laravel/front/js/svelte/libs/Sortable.svelte

<script>
    import Sortable from "sortablejs";
    import {createEventDispatcher, onMount} from "svelte";

    export let sortableClass = "";
    // export let handle;
    export let isTable = false;
    export let sortableInstance;
    const dispatch = createEventDispatcher();
    let sortableContainer;

    onMount(() => {
        let options = {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            easing: "cubic-bezier(1, 0, 0, 1)",
            direction: 'vertical',
            onUpdate: function (/**Event*/ evt) {
                dispatch("update", {
                    source: evt.oldIndex,
                    target: evt.newIndex,
                });
            }
        };

        sortableInstance = Sortable.create(sortableContainer, options);
    });

</script>

{#if isTable}
    <tbody class="sortable-container {sortableClass}" bind:this={sortableContainer}>
    <slot/>
    </tbody>
{:else}
    <div class="sortable-container {sortableClass}" bind:this={sortableContainer}>
        <slot/>
    </div>
{/if}