• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

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
Change Theme:

In this article

Not finding the help you need?