DataCell DragAndDrop

[design-kudry]

DragAndDrop в таблицах
DataCellDragAndDropControl.tsx
DataCellExampleDragAndDrop.tsx
preview-datacell-dnd.html

[design-kudry]

import { DataCellExampleDragAndDrop } from './DataCellExampleDragAndDrop';

import { MdxTabs, MdxMenu } from '@consta/stand';

import { DataCell } from '@consta/table/DataCell';
import { DataCellDragAndDropControl } from './DataCellDragAndDropControl';

DataCellDragAndDropControl — отдельный контрол для drag&drop в DataCell.
Используйте его в control и добавляйте обработчики onDragStart/onDrop на строке таблицы.

• Контрол drag and drop
• Перетаскивание строк
• Бордер вставки

Контрол drag and drop

Контрол вынесен в отдельный компонент:

<DataCell control={<DataCellDragAndDropControl size="s" />}>Текст</DataCell>

Перетаскивание строк

DnD настраивается на уровне строки таблицы:

<div
  draggable
  onDragStart={...}
  onDragOver={(event) => event.preventDefault()}
  onDrop={...}
>
  <DataCell ... />
</div>

Бордер вставки

Для визуальной точки вставки используйте нижнюю линию в цвете фокуса:

box-shadow: inset 0 -1px 0 #0091ff;

<DataCellExampleDragAndDrop />