Skip to content

Drag and drop

DnD

Drag control component.

jsx
import DnD from '@semcore/ui/drag-and-drop;
<DnD />;
import DnD from '@semcore/ui/drag-and-drop;
<DnD />;

DragAndDropProps

& {...}
NameTypeDescription
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}) => voidControlled drag and drop handler
customFocusnumber | stringIndex 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.
localestring

DnD.Draggable

The element, which will be dragged.

jsx
import DnD from '@semcore/ui/drag-and-drop;
<DnD>
  <DnD.Draggable />
</DnD>
import DnD from '@semcore/ui/drag-and-drop;
<DnD>
  <DnD.Draggable />
</DnD>

DraggableProps

& {...}
NameTypeDescription
placement"top" | "right" | "bottom" | "left" | falsePlacement of visual drag-and-drop marker
noDropbooleanDisabled DropZone abilities of component
idstringUsed as `fromId` or `toId` in `onDnD` handler.

DnD.DropZone

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

jsx
import DnD from '@semcore/ui/drag-and-drop;
<DnD>
  <DnD.DropZone />
</DnD>
import DnD from '@semcore/ui/drag-and-drop;
<DnD>
  <DnD.DropZone />
</DnD>

Takes the same properties, as Box.

Released under the MIT License.

Released under the MIT License.