SortableList

Свойства

• direction ('column' | 'row'):
  Определяет направление сортировки списка — по вертикали или по горизонтали.
• gap (number):
  Задает расстояние между элементами списка.
• ids (T[]):
  Массив уникальных идентификаторов элементов списка.
• overlay (jsx.JSX.Element):
  Настраиваемый элемент, который отображается во время перетаскивания.
• deadzone (number):
  Минимальная дистанция, после которой начинает отслеживаться перетаскивание.
• disabled (boolean):
  Отключает возможность сортировки, если значение true.
• style (jsx.JSX.CSSProperties):
  Объект со стилями для компонента.
• dragButtonSelector (string):
  CSS-селектор для элемента, который активирует перетаскивание (например, кнопка внутри элемента списка).
• onSortStart ((props: { id: T, event: MouseEvent }) => void):
  Колбэк, вызываемый в момент начала перетаскивания.
• onSortEnd ((props: { id: T, ids: T[], event: MouseEvent }) => void):
  Колбэк, вызываемый в момент завершения перетаскивания.
• onItemClick ((id: T, event: MouseEvent) => void):
  Колбэк, вызываемый при клике на элемент списка.
• onItemDblClick ((id: T, event: MouseEvent) => void):
  Колбэк, вызываемый при двойном клике на элемент списка.

Основные функции

• setDraggable(event, id):
  Инициализирует перетаскивание для элемента с указанным id и сохраняет его текущие координаты и размеры.
• move():
  Обрабатывает логику перемещения элемента и его позиционирование относительно других элементов.
• onMouseDown(event):
  Обработчик события нажатия мыши, который запускает процесс перетаскивания.
• onMouseMove(event):
  Обработчик движения мыши, который обновляет позицию активного элемента.
• onMouseUp(event):
  Обработчик отпускания кнопки мыши, который завершает перетаскивание и применяет изменения в порядке элементов.