How can I add a drop indicator line when dragging TreeView Items?

[Matt]

I am using the TreeView component with draggable enabled. I don't think that the DragClue indicator is the most intuitive way to see where the drop target is. I would like to add a line to indicate where the drop target is. I attached some images showing what I am trying to achieve. I'd like to have a blue line/indicator showing when I am dropping a node between 2 other nodes, and I would like to highlight the target node when I am dropping a node on top of another node, like show in the attached screenshot.

Any ideas on how to achieve this would be appreciated!

[Konstantin Dikov]

Hello Matt,

You can use the target element and position an indicator line using the position of the target element within the page. Another option is to add class names to the target element dynamically and render a top or bottom border as shown in the following example:

• https://stackblitz.com/edit/react-q29ymb?file=app%2Fmain.jsx,index.html

Hope this helps. 

 

Regards,
Konstantin Dikov
Progress Telerik