[element-plus] el-tree 拖拽到其他地方,不拖拽到树上

el-tree 拖拽到其他地方,不拖拽到树上

html 复制代码
<template>
  <el-tree
    class="filter-tree"
    :data="treeData"
    :props="defaultProps"
    node-key="id"
    draggable
    :allow-drop="allowDrop"
    @node-drag-end="handleDragEnd"
    ref="tree">
  </el-tree>
</template>
js 复制代码
// 阻止el-tree默认拖拽
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
   return false;
}

// 拖拽
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drag end:', dropNode && dropNode.label, dropType)
}

参考:

Vue 跨组件元素拖拽并传递数据(draggable)