在Tree组件拖拽的时候,想限制父节点不能拖拽到子节点这一层,意思是限制只能子节点往上拽。这个可以antd支持吗?
ringa_lee
最终的渲染只在于数据是怎么样的,在数据的改变在于你自己的控制啊,允许不允许,不过是数据是否改变而已了。
比如下面的代码, 子节点 只能放到 第三个 下面,不能放到 第一个 下面(因为我的逻辑就是这样的)。
子节点
第三个
第一个
import * as React from 'react'; import {BaseComponent} from '../base'; import Tree from 'antd/lib/tree'; const TreeNode = Tree.TreeNode; import 'antd/lib/tree/style/index.css'; export interface HeaderProps { } export interface HeaderState { data: any } export class Header extends BaseComponent<HeaderProps, HeaderState> { state = { data: [ {name: '第一个', key: 'a'}, {name: '第二个', key: 'b', children: [ {name: '子节点', key: 'd'} ]}, {name: '第三个', key: 'c'} ] }; constructor(props:HeaderProps) { super(props); } onDragEnter(opt){ console.log(opt, 'x'); } onDrop(opt){ const fromNode = opt.dragNode.props.eventKey; const toNode = opt.node.props.eventKey; if(toNode !== 'c'){ return } this.state.data[2]['children'] = this.state.data[1]['children']; this.state.data[1]['children'] = []; this.setState({}); } loop(data){ return data.map( d => { if(d.children && d.children.length){ return <TreeNode key={d.key} title={d.name}>{this.loop(d.children)}</TreeNode> } else { return <TreeNode key={d.key} title={d.name}></TreeNode> } }) } render() { return (<p> <Tree className="draggable-tree" draggable onDragEnter={this.onDragEnter.bind(this)} onDrop={this.onDrop.bind(this)}> {this.loop(this.state.data)} </Tree> </p>) } }
最终的渲染只在于数据是怎么样的,在数据的改变在于你自己的控制啊,允许不允许,不过是数据是否改变而已了。
比如下面的代码,
子节点
只能放到第三个
下面,不能放到第一个
下面(因为我的逻辑就是这样的)。