主要加入draggable拖拽属性和drop事件,支持拖拽
<a-tree
v-model="checkedKeys4"
checkStrictly
:showLine="true"
checkable
@check="onCheckChange"
:tree-data="treeData"
draggable
@drop="onDrop"
>
</a-tree>
具体drop事件代码实现如下
onDrop(info){
const dropPos = info.node.pos.split('-');
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
const dropKey = info.node.dataRef.key;
const dragKey = info.dragNode.dataRef.key;
const loop = (data, key, callback) => {
data.forEach((item, index) => {
if (item.key === key) {
return callback(item, index, data);
}
if (item.children) {
return loop(item.children, key, callback);
}
});
};
const data = [...this.treeData]; // 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.unshift(dragObj);
});
} else if ((info.node.children || []).length > 0 && // Has children
info.node.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 = 0;
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.treeData=data
},
版权声明:本文为qq_44136882原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。