• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Show clue indicator when dragging an item in the ListBox

Environment

Product Version5.12.0
ProductProgress® KendoReact

Description

I want to show an indicator for the drop position of an item in the ListBox while dragging.

Solution

For displaying a clue indicator for the drop position the onDragOver event should be used for adding a class name to the item where the dragged item will be dropped. Based on the position on the target item and the target ListBox, a top or a bottom border can be displayed to show the correct position where the item will be inserted.

Within the onDrop and on each onDragOver we are clearing the class name that was previously added.

Example
View Source
Change Theme:

In this article

Not finding the help you need?