40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
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}
|
|
|