SortableList

Properties

• direction ('column' | 'row'):
  Determines the sorting direction of the list — vertically or horizontally.
• gap (number):
  Sets the distance between list items.
• ids (T[]):
  An array of unique identifiers for the list items.
• overlay (jsx.JSX.Element):
  A customizable element that is displayed during dragging.
• deadzone (number):
  The minimum distance after which dragging starts to be tracked.
• disabled (boolean):
  Disables sorting if the value is true.
• style (jsx.JSX.CSSProperties):
  An object containing styles for the component.
• dragButtonSelector (string):
  CSS selector for the element that activates dragging (e.g., a button inside the list item).
• onSortStart ((props: { id: T, event: MouseEvent }) => void):
  Callback invoked at the moment dragging starts.
• onSortEnd ((props: { id: T, ids: T[], event: MouseEvent }) => void):
  Callback invoked at the moment dragging ends.
• onItemClick ((id: T, event: MouseEvent) => void):
  Callback invoked when clicking on a list item.
• onItemDblClick ((id: T, event: MouseEvent) => void):
  Callback invoked when double-clicking on a list item.

Main Functions

• setDraggable(event, id):
  Initializes dragging for the item with the specified id and saves its current coordinates and dimensions.
• move():
  Handles the logic for moving the item and positioning it relative to other items.
• onMouseDown(event):
  Mouse down event handler that starts the dragging process.
• onMouseMove(event):
  Mouse move event handler that updates the position of the active item.
• onMouseUp(event):
  Mouse up event handler that ends the dragging and applies changes to the order of items.