@shoplo/kit-vue/src/helpers/TableSortableMixin.ts

import Sortable from 'sortablejs';

export function createSortable(el: any, options: any, vnode: any) {
  return Sortable.create(el, {
    ...options,
    onStart(/** Event */evt: any) {
      evt.clone.className = 'draggable';
    },
    onEnd(evt: any) {
      const data = vnode.context.data;
      const item = data[evt.oldIndex];
      if (evt.newIndex > evt.oldIndex) {
        for (let i = evt.oldIndex; i < evt.newIndex; i++) {
          data[i] = data[i + 1];
        }
      } else {
        for (let i = evt.oldIndex; i > evt.newIndex; i--) {
          data[i] = data[i - 1];
        }
      }
      data[evt.newIndex] = item;
    },
  });
}

export const TableSortable = {
  name: 'table-sortable',
  bind(el: any, binding: any, vnode: any) {
    const table = el.querySelector('table');
    table._sortable = createSortable(table.querySelector('tbody'), binding.value, vnode);
  },
  update(el: any, binding: any, vnode: any) {
    const table = el.querySelector('table');
    table._sortable.destroy();
    table._sortable = createSortable(table.querySelector('tbody'), binding.value, vnode);
  },
  unbind(el: any) {
    const table = el.querySelector('table');
    table._sortable.destroy();
  },
};

export default TableSortable;