2024-08-10 17:46:48 +08:00
|
|
|
import type {SortableOptions} from 'sortablejs';
|
|
|
|
|
|
|
|
export async function createSortable(el, opts: {handle?: string} & SortableOptions = {}) {
|
2023-07-18 02:06:37 +08:00
|
|
|
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
|
2024-03-28 07:20:38 +08:00
|
|
|
|
|
|
|
return new Sortable(el, {
|
|
|
|
animation: 150,
|
|
|
|
ghostClass: 'card-ghost',
|
|
|
|
onChoose: (e) => {
|
|
|
|
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
|
|
|
|
handle.classList.add('tw-cursor-grabbing');
|
|
|
|
opts.onChoose?.(e);
|
|
|
|
},
|
|
|
|
onUnchoose: (e) => {
|
|
|
|
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
|
|
|
|
handle.classList.remove('tw-cursor-grabbing');
|
|
|
|
opts.onUnchoose?.(e);
|
|
|
|
},
|
|
|
|
...opts,
|
2024-08-10 17:46:48 +08:00
|
|
|
} satisfies SortableOptions);
|
2023-07-18 02:06:37 +08:00
|
|
|
}
|