Drag and drop

DnD

Drag control component.

jsx

import DnD from 'intergalactic/drag-and-drop';
<DnD />;

import DnD from 'intergalactic/drag-and-drop';
<DnD />;

& {...}

Name	Type	Description
theme	"dark" \| "default"
onSwapDraggable	(draggableNode: React.ReactNode, droppableNode: React.ReactNode) => void
onInsertDroppable	(draggableNode: React.ReactNode, droppableNode: React.ReactNode) => void
onDnD	(dndData: {fromIndex: number; fromId: string; toIndex: number; toId: string}) => void	Controlled drag and drop handler
customFocus	number \| string	Index of id that indicates item that is currently under the user focus in case of real browser focus cannot be used. When provided, drag and drop listens to whole page keyboard events. Doesn't provide `onCustomFocusChange` callback.
locale	string

The element, which will be dragged.

jsx

import DnD from 'intergalactic/drag-and-drop';
<DnD>
  <DnD.Draggable />
</DnD>

import DnD from 'intergalactic/drag-and-drop';
<DnD>
  <DnD.Draggable />
</DnD>

& {...}

Name	Type	Description
placement	"top" \| "right" \| "bottom" \| "left" \| false	Placement of visual drag-and-drop marker
noDrop	boolean	Disabled DropZone abilities of component
id	string	Used as `fromId` or `toId` in `onDnD` handler.
zoneName	string	Used for add zoneName in a11y hints

The area, to which the dragged element will be placed.

jsx

import DnD from 'intergalactic/drag-and-drop';
<DnD>
  <DnD.DropZone />
</DnD>

import DnD from 'intergalactic/drag-and-drop';
<DnD>
  <DnD.DropZone />
</DnD>

& {...}

Name	Type	Description
zoneName	string	Used for add zoneName in a11y hints