useDraggableCollectionState

Manages state for a draggable collection.

installyarn add react-stately
version3.31.1
usageimport {useDraggableCollectionState} from 'react-stately'

API#


useDraggableCollectionState( (props: DraggableCollectionStateOptions )): DraggableCollectionState

Interface#


Properties

NameTypeDescription
collectionCollection<Node<unknown>>A collection of items.
selectionManagerMultipleSelectionManagerAn interface for reading and updating multiple selection state.
draggedKeyKeynullThe key of the item that initiated a drag.
draggingKeysSet<Key>The keys of the items that are currently being dragged.
isDisabledbooleanWhether drag events are disabled.
previewRefObject<DragPreviewRenderer>The ref of the element that will be rendered as the drag preview while dragging.
getAllowedDropOperations() => DropOperation[]Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

Methods

MethodDescription
isDragging( (key: Key )): booleanReturns whether the given key is currently being dragged.
getKeysForDrag( (key: Key )): Set<Key>Returns the keys of the items that will be dragged with the given key (e.g. selected items).
getItems( (key: Key )): DragItem[]Returns the items to drag for the given key.
startDrag( (key: Key, , event: DragStartEvent )): voidBegins a drag for the given key. This triggers the onDragStart event.
moveDrag( (event: DragMoveEvent )): voidTriggers an onDragMove event.
endDrag( (event: DraggableCollectionEndEvent )): voidEnds the current drag, and emits an onDragEnd event.

Example#


See the docs for useDraggableCollection in react-aria for an example of useDraggableCollectionState.