Core API

/**
 * Creates a sortable drag-and-drop interface on an HTML element
 * @param el - HTMLElement to make sortable
 * @param options - Configuration options object
 */
function Sortable(el: HTMLElement, options?: SortableOptions): Sortable;

import Sortable from "sortablejs";

// Basic sortable list
const sortable = new Sortable(document.getElementById('list'), {
  animation: 150,
  ghostClass: 'sortable-ghost'
});

// Sortable with advanced options
const advancedSortable = new Sortable(document.getElementById('items'), {
  group: 'shared',
  animation: 300,
  handle: '.drag-handle',
  filter: '.no-drag',
  onEnd: (evt) => console.log('Drag ended', evt)
});

/**
 * Static factory method to create a sortable instance
 * @param el - HTMLElement to make sortable
 * @param options - Configuration options object
 * @returns New Sortable instance
 */
Sortable.create(el: HTMLElement, options?: SortableOptions): Sortable;

/**
 * Get the Sortable instance associated with an element
 * @param element - Element to get the instance for
 * @returns Sortable instance or undefined if none exists
 */
Sortable.get(element: HTMLElement): Sortable | undefined;

/**
 * Mount plugins to extend Sortable functionality
 * @param plugins - One or more plugin objects to register
 */
Sortable.mount(...plugins: SortablePlugin[]): void;

import Sortable, { MultiDrag, AutoScroll } from "sortablejs";

// Mount plugins before creating sortable instances
Sortable.mount(new MultiDrag(), new AutoScroll());

// Now create sortables with plugin support
const sortable = Sortable.create(el, {
  multiDrag: true,
  selectedClass: 'selected'
});

Sortable.version: string;

Sortable.utils: SortableUtils;

Sortable.active: Sortable | null;

Sortable.dragged: HTMLElement | null;

Sortable.ghost: HTMLElement | null;

Sortable.clone: HTMLElement | null;

/**
 * Serialize the sortable's item order
 * @returns Array of data-id attribute values or generated indices
 */
toArray(): string[];

// HTML with data-id attributes
// <ul id="list">
//   <li data-id="item-1">First</li>
//   <li data-id="item-2">Second</li> 
//   <li data-id="item-3">Third</li>
// </ul>

const sortable = Sortable.create(document.getElementById('list'));
const order = sortable.toArray(); // ['item-1', 'item-2', 'item-3']

// Save order for later restoration
localStorage.setItem('list-order', JSON.stringify(order));

/**
 * Reorder items according to an array
 * @param order - Array of item IDs in desired order
 * @param useAnimation - Whether to animate the reordering
 */
sort(order: string[], useAnimation?: boolean): void;

const sortable = Sortable.create(document.getElementById('list'));

// Reorder items programmatically
sortable.sort(['item-3', 'item-1', 'item-2']);

// Reorder with animation
sortable.sort(['item-2', 'item-3', 'item-1'], true);

// Restore saved order
const savedOrder = JSON.parse(localStorage.getItem('list-order'));
if (savedOrder) {
  sortable.sort(savedOrder);
}

/**
 * Save the current sorting order using the store option
 */
save(): void;

/**
 * Find the closest draggable ancestor element
 * @param el - Starting element
 * @param selector - CSS selector (optional, defaults to options.draggable)
 * @returns Closest draggable element or null
 */
closest(el: HTMLElement, selector?: string): HTMLElement | null;

/**
 * Get or set a configuration option
 * @param name - Option name
 * @param value - Option value (omit to get current value)
 * @returns Current option value when getting
 */
option(name: string, value?: any): any;

const sortable = Sortable.create(el);

// Get current animation duration
const currentAnimation = sortable.option('animation'); // 0

// Update animation duration
sortable.option('animation', 300);

// Disable the sortable
sortable.option('disabled', true);

// Enable it again
sortable.option('disabled', false);

/**
 * Destroy the sortable instance and cleanup event listeners
 */
destroy(): void;

const sortable = Sortable.create(el);

// Later, when component unmounts or is no longer needed
sortable.destroy();

// The element is no longer sortable and all event listeners are removed

/**
 * Main event handler for drag and drop events
 * @param evt - DOM event object
 */
handleEvent(evt: Event): void;

interface SortablePlugin {
  name: string;
  defaults?: object;
  eventOptions?: object;
  initializePlugin?: (sortable: Sortable) => void;
}

interface SortableUtils {
  on(el: HTMLElement, event: string, fn: Function): void;
  off(el: HTMLElement, event: string, fn: Function): void;
  css(el: HTMLElement, prop: string, value?: string): string | void;
  find(ctx: HTMLElement, tagName: string, iterator?: Function): HTMLElement[];
  is(el: HTMLElement, selector: string): boolean;
  extend(dst: object, ...src: object[]): object;
  throttle(fn: Function, ms: number): Function;
  closest(el: HTMLElement, selector: string, ctx?: HTMLElement): HTMLElement | null;
  toggleClass(el: HTMLElement, name: string, state?: boolean): void;
  clone(el: HTMLElement): HTMLElement;
  index(el: HTMLElement, selector?: string): number;
  nextTick(fn: Function): number;
  cancelNextTick(id: number): void;
  detectDirection(el: HTMLElement): string;
  getChild(el: HTMLElement, childNum: number, options?: object): HTMLElement;
  expando: string;
}