element-ui tree只允许同级拖拽

1,570 阅读1分钟

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
    }