--- order: 2 title: zh-CN: 拖动示例 en-US: draggable --- ## zh-CN 将节点拖拽到其他节点内部或前后。 ## en-US Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode. ````jsx import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; const x = 3; const y = 2; const z = 1; const gData = []; const generateData = (_level, _preKey, _tns) => { const preKey = _preKey || '0'; const tns = _tns || gData; const children = []; for (let i = 0; i < x; i++) { const key = `${preKey}-${i}`; tns.push({ title: key, key }); if (i < y) { children.push(key); } } if (_level < 0) { return tns; } const level = _level - 1; children.forEach((key, index) => { tns[index].children = []; return generateData(level, key, tns[index].children); }); }; generateData(z); class Demo extends React.Component { state = { gData, expandedKeys: ['0-0', '0-0-0', '0-0-0-0'], } onDragEnter = (info) => { console.log(info); // expandedKeys 需要受控时设置 // this.setState({ // expandedKeys: info.expandedKeys, // }); } onDrop = (info) => { console.log(info); const dropKey = info.node.props.eventKey; const dragKey = info.dragNode.props.eventKey; const dropPos = info.node.props.pos.split('-'); const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); const loop = (data, key, callback) => { data.forEach((item, index, arr) => { if (item.key === key) { return callback(item, index, arr); } if (item.children) { return loop(item.children, key, callback); } }); }; const data = [...this.state.gData]; // Find dragObject let dragObj; loop(data, dragKey, (item, index, arr) => { arr.splice(index, 1); dragObj = item; }); if (!info.dropToGap) { // Drop on the content loop(data, dropKey, (item) => { item.children = item.children || []; // where to insert 示例添加到尾部,可以是随意位置 item.children.push(dragObj); }); } else if ( (info.node.props.children || []).length > 0 // Has children && info.node.props.expanded // Is expanded && dropPosition === 1 // On the bottom gap ) { loop(data, dropKey, (item) => { item.children = item.children || []; // where to insert 示例添加到尾部,可以是随意位置 item.children.unshift(dragObj); }); } else { let ar; let i; loop(data, dropKey, (item, index, arr) => { ar = arr; i = index; }); if (dropPosition === -1) { ar.splice(i, 0, dragObj); } else { ar.splice(i + 1, 0, dragObj); } } this.setState({ gData: data, }); } render() { const loop = data => data.map((item) => { if (item.children && item.children.length) { return {loop(item.children)}; } return ; }); return ( {loop(this.state.gData)} ); } } ReactDOM.render(, mountNode); ```` ````css /* You can add the following CSS to your project to make draggable area bigger */ #components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper { width: calc(100% - 18px); } ````