Tree

[yongchang]

What I am trying to do: selected node draggable and droppable.


I have make a codesandbox to show what I have done so far.

This is the code that I have tried, it is not working. Any advice is appreciated. 

Code:

  handleSelectionChange(selection) {
    <Draggable>{selection}</Draggable>;
    this.setState({ selection: selection });
  }

[jarry]

The dnd is the built-in feature in Tree component. Please look at this example https://www.jeasyui.com/demo-react/main/index.php?plugin=Tree&theme=material-teal&dir=ltr&pitem=Drag%20Drop%20Tree%20Nodes&sort=asc

[yongchang]

That is not what I am trying to do.
I want to drag the node and place it somewhere else like this Demo. Click on the word Demo to navigate to the demo I am referring.

[jarry]

Custom the tree nodes to make them draggable and then define a Droppable area to accept the dropped nodes. Please refer to the code below.

Code:

renderNode({ node }) {
    const proxy = () => {
        return (
            <div className="tree-node-proxy">
                <span className="tree-dnd-icon" ref={el => node.dndIconEl = el}>&nbsp;</span>
                <span>{node.text}</span>
            </div>
        )
    }
    return (
        <Draggable
            revert
            proxy={proxy}
            deltaX={10}
            deltaY={10}
            edge={5}
        >
            <span>{node.text}</span>
        </Draggable>
    )
}

Code:

<div className="f-row">
    <div>
        <Tree data={this.state.data} render={this.renderNode}></Tree>
    </div>
    <Droppable
        onDragEnter={() => this.setState({ isover: true })}
        onDragLeave={() => this.setState({ isover: false })}
        onDrop={() => this.setState({ dropped: true })}
    >
        <div className={dropCls} style={{ border: '1px solid #ddd', width: 200, marginLeft: 20 }}>
            <p style={{ textAlign: 'center' }}>Drop here</p>
        </div>
    </Droppable>
</div>