Atay-Makhzan/web_src/js/modules/sortable.ts

import type {SortableOptions, SortableEvent} from 'sortablejs';
import type SortableType from 'sortablejs';

export async function createSortable(el: HTMLElement, opts: {handle?: string} & SortableOptions = {}): Promise<SortableType> {
  // type reassigned because typescript derives the wrong type from this import
  const {Sortable} = (await import('sortablejs') as unknown as {Sortable: typeof SortableType});

  return new Sortable(el, {
    animation: 150,
    ghostClass: 'card-ghost',
    onChoose: (e: SortableEvent) => {
      const handle = opts.handle ? e.item.querySelector(opts.handle)! : e.item;
      handle.classList.add('tw-cursor-grabbing');
      opts.onChoose?.(e);
    },
    onUnchoose: (e: SortableEvent) => {
      const handle = opts.handle ? e.item.querySelector(opts.handle)! : e.item;
      handle.classList.remove('tw-cursor-grabbing');
      opts.onUnchoose?.(e);
    },
    ...opts,
  } satisfies SortableOptions);
}