Drag and Drop

The KendoReact ListBox enables users to drag and drop items within the same list, to reorder them, or to move them between lists.

Setup

The drag and drop functionality has the following requirements:

Use the onDragStart event of the ListBox to save in the state which item is being dragged.
Utilize the onDrop event to capture where the item was dropped.
With the onDrop event, use the processListBoxDragAndDrop method, which will automatically process the data based on the provided parameters.

The following example demonstrates the ListBox drag and drop functionality in action.

Change Theme

Theme

Loading ...