[Feature Request] Drag-and-drop tree

[not-an-llm]

Problem

I'd like to provide a way for my users to quickly reorder tree elements using a drag-and-drop interface. Ant Design has draggable trees defined here https://ant.design/components/tree#tree-demo-draggable

However, there isn't really anything like this supported in Streamlit today. Probably the most similar library is the Streamlit Sortables library which allows drag-and-drop of elements between containers. But it isn't really the same as doing it wihtin a tree.

Request

• Drag-and-drop tree that lets users drag a treeNode to insert after the other treeNode or insert into the other parent TreeNode.
• Property: draggable that specifies whether this Tree or the node is draggable. Use icon: false to disable drag handler icon

  boolean | ((node: DataNode) => boolean) | { icon?: React.ReactNode | false, nodeDraggable?: (node: DataNode) => boolean }
  

• I noticed the antd design library also has the following callback functions. I'm not sure if these also need to be created, but want to raise for visibility:
  onDragEnd Callback function for when the onDragEnd event occurs function({event, node}) -
  onDragEnter Callback function for when the onDragEnter event occurs function({event, node, expandedKeys}) -
  onDragLeave Callback function for when the onDragLeave event occurs function({event, node}) -
  onDragOver Callback function for when the onDragOver event occurs function({event, node}) -
  onDragStart Callback function for when the onDragStart event occurs function({event, node}) -
  onDrop Callback function for when the onDrop event occurs function({event, node, dragNode, dragNodesKeys})

It would be amazing to have this feature introduced into Streamlit's community, and StreamlitAntdComponents seems like the right place for this.

Thanks for creating this library!