• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • 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&Drop Overview

The KendoReact Drag&Drop functionality provides an easy way to implement drag and drop of native HTML elements or custom React components.

Depending on the type of the targeted React components, you can implement the Drag&Drop in two ways:

The following example demonstrates the Drag&Drop in action.

View Source
Change Theme:

The example above showcases the Drag&Drop functionality—we register an element as draggable and provide four possible droppable elements. Additionally, we apply a visual clue to the drop elements to show where a drop is possible.

To learn how import, install and use the useDraggable, useDroppable and their Class component alternatives, see the Getting Started with the KendoReact Drag&Drop guide.

The Drag&Drop is part of the KendoReact Common Utilities component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the Drag&Drop and the rest of the Common Utilities, see the Getting Started with the KendoReact Common Utilities guide.

Key Features

  • Auto Scroll—Automatically scroll the nearest scroll container when the dragged component is close to the edges.
  • Drag Hint—Render a copy of the original element to be used as hint during dragging.
  • Drag Handle—Allow drag only through interacting with a specified handle while still using the parent element for drop detection.
  • Hold to Drag—Enable dragging after holding the drag element for a specific period of time.
  • Minimum Distance—Display the drag hint after a a predefined distance is covered.
  • Axis lock—Enable dragging only on a single axis.

In this article

Not finding the help you need?