Function useSortable

packages/vue/src/sortable/useSortable.ts:28–108

(input: UseSortableInput<T>)

}

export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
  const transition = computed(() => ({
    ...defaultSortableTransition,
    ...toValue(input.transition),
  }));

  const sortable = useInstance((manager) => {
    const _input = toValueDeep(input);

    return new Sortable(
      {
        ..._input,
        register: false,
        transition: transition.value,
        element: unrefElement(input.element),
        handle: unrefElement(input.handle),
        target: unrefElement(input.target),
      },
      manager
    );
  });
  const trackedSortable = useDeepSignal(sortable);

  watchEffect(() => {
    sortable.value.element = unrefElement(input.element);
    sortable.value.handle = unrefElement(input.handle);

    if (unrefElement(input.source)) {
      sortable.value.source = unrefElement(input.source);
    }
    if (unrefElement(input.target)) {
      sortable.value.target = unrefElement(input.target);
    }

    sortable.value.id = toValue(input.id);
    sortable.value.disabled = toValue(input.disabled) ?? false;
    sortable.value.alignment = toValue(input.alignment);
    sortable.value.plugins = toValue(input.plugins);
    sortable.value.modifiers = toValue(input.modifiers);
    sortable.value.sensors = toValue(input.sensors);
    sortable.value.accept = toValue(input.accept);
    sortable.value.type = toValue(input.type);
    sortable.value.collisionPriority = toValue(input.collisionPriority);
    sortable.value.transition = transition.value;

    if (toValue(input.data)) {
      sortable.value.data = toValue(input.data)!;
    }
  });

  watch(
    [() => toValue(input.group), () => toValue(input.index)],
    () => {
      batch(() => {
        sortable.value.group = toValue(input.group);
        sortable.value.index = toValue(input.index);
      });
    },