ant-design/components/tree/demo/draggable.md
2018-10-25 11:19:17 +08:00

155 lines
3.6 KiB
Markdown

---
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 <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
}
return <TreeNode key={item.key} title={item.title} />;
});
return (
<Tree
className="draggable-tree"
defaultExpandedKeys={this.state.expandedKeys}
draggable
onDragEnter={this.onDragEnter}
onDrop={this.onDrop}
>
{loop(this.state.gData)}
</Tree>
);
}
}
ReactDOM.render(<Demo />, 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);
}
````