New to KendoReact? Start a free 30-day trial

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:

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

Basic Usage

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?