mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
a0eb9d31de
* fix: Transfer dataSource cannot be immutable (#28675)
close #28662
* docs: fix errors in example code (#28677)
* ci: expand ie check (#28673)
* ci: expand ie check
* Update issue-open-check.yml
* perf(📦): reduce @babel/runtime package size (#28678)
* perf(📦): reduce @babel/runtime package size
04cd73dea1
* chore(🆙): upgrade @ant-design/react-slick to esm support version
* upgrade @ant-design/tools
* ci: add open condition (#28682)
* fix(Slider): forcePopupAlign null when unmounted (#28699)
* docs: Update overview.zh-CN.md (#28703)
* docs: Update resources.en-US.md (#28701)
* chore: bump rc-select to 12.1.0 (#28715)
* fix: stylelint plugin (#28730)
* Update package.json
* perf(📦): upgrade rc-image to 5.x (#28727)
* refactor: upgrade rc-image to 5.x
reduce bundle size
* upgrade rc-image
* upgrade @ant-design/tools
https://github.com/ant-design/antd-tools/pull/226
* rc-image 5.0.0
* fix image preview icon missing
* refactor code
* docs: example of synchronous rc-tree (#28648)
* ci: fix outputs type
过程中的使用 string。奇怪啊,之前测试过的,今天点的时候发现不行了
* Update package.json
* fix: site overflow cause sticky invalid (#28741)
* fix: site overflow cause sticky invalid
* disable auto scroll
* chore: upgrade rc-dialog and rc-drawer (#28749)
* chore: upgrade rc-dialog and rc-drawer (#28687)
* chore: upgrade rc-dialog and rc-drawer
* upgrade rc-util
* update snapshots
* upgrade rc-util
* upgrade rc-util
* update snapshots
* upgrade rc-dialog
* perf: remove duplicated rc-dialog
Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
Co-authored-by: bigbigbo <zxb141242@163.com>
Co-authored-by: xrkffgg <xrkffgg@gmail.com>
Co-authored-by: Yann Pringault <yann.pringault@gmail.com>
Co-authored-by: godfather <greenday.wj@foxmail.com>
Co-authored-by: Mateusz Wierzbicki <22788841+mateusz-wierzbicki@users.noreply.github.com>
Co-authored-by: Kermit <kermitlx@outlook.com>
Co-authored-by: AkiJoey <akijoey1010635951@gmail.com>
Co-authored-by: qqabcv520 <605655316@qq.com>
Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
186 lines
4.2 KiB
Markdown
186 lines
4.2 KiB
Markdown
---
|
|
order: 98
|
|
title:
|
|
zh-CN: Drag Debug
|
|
en-US: Drag Debug
|
|
debug: true
|
|
---
|
|
|
|
```jsx
|
|
import { Tree, Switch } from 'antd';
|
|
import { CarryOutOutlined } from '@ant-design/icons';
|
|
|
|
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, icon: <CarryOutOutlined /> });
|
|
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'],
|
|
showLine: true,
|
|
showIcon: true,
|
|
showLeafIcon: true,
|
|
};
|
|
|
|
onDragEnter = info => {
|
|
console.log(info);
|
|
// expandedKeys 需要受控时设置
|
|
// this.setState({
|
|
// expandedKeys: info.expandedKeys,
|
|
// });
|
|
};
|
|
|
|
onDrop = info => {
|
|
console.log(info);
|
|
const dropKey = info.node.key;
|
|
const dragKey = info.dragNode.key;
|
|
const dropPos = info.node.pos.split('-');
|
|
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
|
|
const loop = (data, key, callback) => {
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i].key === key) {
|
|
return callback(data[i], i, data);
|
|
}
|
|
if (data[i].children) {
|
|
loop(data[i].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,
|
|
});
|
|
};
|
|
|
|
setShowLine = showLine => {
|
|
const { showLeafIcon } = this.state;
|
|
if (showLine) {
|
|
if (showLeafIcon) {
|
|
this.setState({
|
|
showLine: {
|
|
showLeafIcon: true,
|
|
},
|
|
});
|
|
} else {
|
|
this.setState({
|
|
showLine: true,
|
|
});
|
|
}
|
|
} else {
|
|
this.setState({
|
|
showLine: false,
|
|
});
|
|
}
|
|
};
|
|
|
|
setShowIcon = showIcon => {
|
|
this.setState({
|
|
showIcon,
|
|
});
|
|
};
|
|
|
|
setShowLeafIcon = showLeafIcon => {
|
|
this.setState({
|
|
showLeafIcon,
|
|
showLine: { showLeafIcon },
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { showLine, showIcon, showLeafIcon, expandedKeys } = this.state;
|
|
const { setShowLine, setShowIcon, setShowLeafIcon } = this;
|
|
return (
|
|
<>
|
|
<div style={{ marginBottom: 16 }}>
|
|
showLine: <Switch checked={showLine} onChange={setShowLine} />
|
|
<br />
|
|
<br />
|
|
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
|
|
<br />
|
|
<br />
|
|
showLeafIcon: <Switch checked={showLeafIcon} onChange={setShowLeafIcon} />
|
|
</div>
|
|
<Tree
|
|
showLine={showLine}
|
|
showIcon={showIcon}
|
|
className="draggable-tree"
|
|
defaultExpandedKeys={expandedKeys}
|
|
draggable
|
|
blockNode
|
|
onDragEnter={this.onDragEnter}
|
|
onDrop={this.onDrop}
|
|
treeData={this.state.gData}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|