javascript - Le composant Tree d'antd, prend-il en charge les restrictions de glisser-déposer ?

Question

Lorsque je fais glisser le composant Tree, je souhaite empêcher le nœud parent d'être déplacé au niveau du nœud enfant, ce qui signifie que seul le nœud enfant peut être déplacé vers le haut. Cela peut-il être pris en charge par antd ?

Answer 1

Le rendu final dépend uniquement de l'apparence des données. La modification des données est sous votre propre contrôle. Qu'elle soit autorisée ou non, il s'agit simplement de savoir si les données changent.

Par exemple, le code suivant, 子节点 只能放到 第三个 下面，不能放到 第一个 ci-dessous (car c'est ma logique).

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