基于vue+element 实现两个树形tree之间的跨树拖拽

最新推荐文章于 2025-05-13 10:10:38 发布

原创

最新推荐文章于 2025-05-13 10:10:38 发布 · 5.8k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #elementui

<el-tree
  :data="data"
  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>

这是element中可以用于自身拖拽的组件，今天要完成的是跨树拖拽，大概思路就是节点的复制
下面先附上代码

<template>
  <div class="tree-drag">
    <el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable :allow-drag="returnTrue" @node-drag-start="handleDragstart" @node-drag-end="handleDragend"></el-tree>
    <el-tree :data="treeData2" ref="treeOut" class="tree" node-key