ant-design-vue/components/vc-tree/demo/draggable.vue

111 lines
2.9 KiB
Vue
Raw Normal View History

2018-04-12 14:04:55 +00:00
<script>
/* eslint no-console:0 */
2019-01-12 03:33:27 +00:00
import './draggable.less';
import Tree, { TreeNode } from '../index';
import '../assets/index.less';
import { gData } from './util';
import BaseMixin from '../../_util/BaseMixin';
2018-04-12 14:04:55 +00:00
export default {
mixins: [BaseMixin],
data () {
return {
gData,
autoExpandParent: true,
expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key'],
2019-01-12 03:33:27 +00:00
};
2018-04-12 14:04:55 +00:00
},
methods: {
onDragStart (info) {
2019-01-12 03:33:27 +00:00
console.log('start', info);
2018-04-12 14:04:55 +00:00
},
onDragEnter (info) {
2019-01-12 03:33:27 +00:00
console.log('enter', info);
2018-04-12 14:04:55 +00:00
this.setState({
expandedKeys: info.expandedKeys,
2019-01-12 03:33:27 +00:00
});
2018-04-12 14:04:55 +00:00
},
onDrop (info) {
2019-01-12 03:33:27 +00:00
console.log('drop', info);
const dropKey = info.node.eventKey;
const dragKey = info.dragNode.eventKey;
const dropPos = info.node.pos.split('-');
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
2018-04-12 14:04:55 +00:00
// const dragNodesKeys = info.dragNodesKeys;
const loop = (data, key, callback) => {
data.forEach((item, index, arr) => {
if (item.key === key) {
2019-01-12 03:33:27 +00:00
return callback(item, index, arr);
2018-04-12 14:04:55 +00:00
}
if (item.children) {
2019-01-12 03:33:27 +00:00
return loop(item.children, key, callback);
2018-04-12 14:04:55 +00:00
}
2019-01-12 03:33:27 +00:00
});
};
const data = [...this.gData];
let dragObj;
2018-04-12 14:04:55 +00:00
loop(data, dragKey, (item, index, arr) => {
2019-01-12 03:33:27 +00:00
arr.splice(index, 1);
dragObj = item;
});
2018-04-12 14:04:55 +00:00
if (info.dropToGap) {
2019-01-12 03:33:27 +00:00
let ar;
let i;
2018-04-12 14:04:55 +00:00
loop(data, dropKey, (item, index, arr) => {
2019-01-12 03:33:27 +00:00
ar = arr;
i = index;
});
2018-04-12 14:04:55 +00:00
if (dropPosition === -1) {
2019-01-12 03:33:27 +00:00
ar.splice(i, 0, dragObj);
2018-04-12 14:04:55 +00:00
} else {
2019-01-12 03:33:27 +00:00
ar.splice(i + 1, 0, dragObj);
2018-04-12 14:04:55 +00:00
}
} else {
loop(data, dropKey, (item) => {
2019-01-12 03:33:27 +00:00
item.children = item.children || [];
2018-04-12 14:04:55 +00:00
// where to insert 示例添加到尾部,可以是随意位置
2019-01-12 03:33:27 +00:00
item.children.push(dragObj);
});
2018-04-12 14:04:55 +00:00
}
this.setState({
gData: data,
2019-01-12 03:33:27 +00:00
});
2018-04-12 14:04:55 +00:00
},
onExpand (expandedKeys) {
2019-01-12 03:33:27 +00:00
console.log('onExpand', arguments);
2018-04-12 14:04:55 +00:00
this.setState({
expandedKeys,
autoExpandParent: false,
2019-01-12 03:33:27 +00:00
});
2018-04-12 14:04:55 +00:00
},
},
render () {
const loop = data => {
return data.map((item) => {
if (item.children && item.children.length) {
2019-01-12 03:33:27 +00:00
return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
2018-04-12 14:04:55 +00:00
}
2019-01-12 03:33:27 +00:00
return <TreeNode key={item.key} title={item.title} />;
});
};
2018-04-12 14:04:55 +00:00
return (<div class='draggable-demo'>
<h2>draggable</h2>
<p>drag a node into another node</p>
<div class='draggable-container'>
<Tree
expandedKeys={this.expandedKeys}
onExpand={this.onExpand} autoExpandParent={this.autoExpandParent}
draggable
onDragstart={this.onDragStart}
onDragenter={this.onDragEnter}
onDrop={this.onDrop}
>
{loop(this.gData)}
</Tree>
</div>
2019-01-12 03:33:27 +00:00
</div>);
2018-04-12 14:04:55 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-04-12 14:04:55 +00:00
</script>