vue3实现在div文本列表中拖拽到另一个div中生成tree文件结构样式

实现这个功能，可以使用vue-draggable-nested-tree组件。这个组件可以帮助我们实现拖拽生成tree文件结构样式。

首先，安装vue-draggable-nested-tree组件：

npm install vue-draggable-nested-tree --save

然后在需要使用的组件中引入：

<template>
  <div>
    <div class="source">
      <div v-for="(item, index) in sourceList" :key="index" class="item">
        {{item.name}}
      </div>
    </div>
    <div class="target">
      <vue-draggable-nested-tree :treeData="treeData" @updateTreeData="updateTreeData"></vue-draggable-nested-tree>
    </div>
  </div>
</template>

<script>
import VueDraggableNestedTree from 'vue-draggable-nested-tree'

export default {
  name: 'DraggableTree',
  components: { VueDraggableNestedTree },
  data () {
    return {
      sourceList: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ],
      treeData: {
        name: 'root',
        children: []
      }
    }
  },
  methods: {
    updateTreeData (newTreeData) {
      this.treeData = newTreeData
    }
  }
}
</script>

在上面的代码中，我们使用了vue-draggable-nested-tree组件，并且将树形结构的数据绑定到了treeData属性上。

然后我们在组件中定义了一个sourceList数组，用于存放源数据列表，我们可以通过拖拽将数据从源列表拖到目标列表中生成树形结构。

当我们拖拽完成后，可以通过监听updateTreeData事件来获取拖拽后的树形结构数据，并将其绑定到treeData属性上。

最后，我们可以在模板中渲染出源列表和目标列表，用于展示拖拽效果。

.item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
}

.target {
  margin-top: 20px;
}

<div class="source">
  <div v-for="(item, index) in sourceList" :key="index" class="item">
    {{item.name}}
  </div>
</div>
<div class="target">
  <vue-draggable-nested-tree :treeData="treeData" @updateTreeData="updateTreeData"></vue-draggable-nested-tree>
</div>

这样，我们就可以通过vue-draggable-nested-tree组件实现在div文本列表中拖拽到另一个div中生成tree文件结构样式了。