element-ui不允许将一个拖拽成为另一个的下级
<el-tree
:data="chapters"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
const handleDragStart = (node, ev) => {
console.log('drag start', node)
}
const handleDragEnter = (draggingNode, dropNode, ev) => {
// console.log('tree drag enter: ', draggingNode, dropNode)
}
const handleDragLeave = (draggingNode, dropNode, ev) => {
// console.log('tree drag leave: ', draggingNode, dropNode)
}
const handleDragOver = (draggingNode, dropNode, ev) => {
// console.log('tree drag over: ', draggingNode, dropNode)
}
const handleDragEnd = (draggingNode, dropNode, dropType, ev) => {
// console.log('tree drag end: ', dropNode, dropType)
if (dropType !== 'none') {
// console.log(props.chapters)
const ids = []
props.chapters.forEach(item => {
ids.push(item.id)
})
console.log(ids)
}
}
const handleDrop = (draggingNode, dropNode, dropType, ev) => {
// console.log('tree drop: ', dropNode.label, dropType)
}
const allowDrop = (draggingNode, dropNode, type) => {
// console.log('allowDrop', draggingNode, dropNode, type)
// 不能拖拽到级别里面
if (type === 'inner' || Number(dropNode.data.pid) === 0) return
if (draggingNode.nextSibling === undefined) {
return type === 'prev'
} else if (dropNode.nextSibling === undefined) {
return type === 'next'
} else if (draggingNode.nextSibling.id !== dropNode.id) {
return type === 'prev'
} else {
return type === 'next'
}
}
const allowDrag = (draggingNode) => {
console.log('allowDrag', draggingNode)
if (Number(draggingNode.data.pid) === 0) {
return false
}
return true
}