javascript - Unterstützt die Tree-Komponente von antd Drag-and-Drop-Einschränkungen?

Question

Beim Ziehen der Baumkomponente möchte ich verhindern, dass der übergeordnete Knoten auf die Ebene des untergeordneten Knotens gezogen wird, was bedeutet, dass nur der untergeordnete Knoten nach oben gezogen werden kann. Kann dies von antd unterstützt werden?

Answer 1

最终的渲染只在于数据是怎么样的，在数据的改变在于你自己的控制啊，允许不允许，不过是数据是否改变而已了。

比如下面的代码， 子节点 只能放到 第三个 下面，不能放到 第一个 下面（因为我的逻辑就是这样的）。

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>)
    }
}