Print Page - Tree

Title: Tree
Post by: yongchang on July 22, 2020, 12:15:26 AM

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

I have make a codesandbox (https://codesandbox.io/s/rc-easyui-tree-j12kk?file=/src/App.js) 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 });
  }

Title: Re: Tree
Post by: jarry on July 22, 2020, 11:45:01 PM

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

Title: Re: Tree
Post by: yongchang on July 23, 2020, 08:41:51 PM

That is not what I am trying to do.
I want to drag the node and place it somewhere else like this Demo (https://www.jeasyui.com/demo-react/main/index.php?plugin=Droppable&theme=material-teal&dir=ltr&pitem=&sort=asc). Click on the word Demo to navigate to the demo I am referring.

Title: Re: Tree
Post by: jarry on July 27, 2020, 02:14:57 AM

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>

EasyUI Forum

General Category => EasyUI for React => Topic started by: yongchang on July 22, 2020, 12:15:26 AM