Javascript SortableJS：使用VueJS构建具有拖放功能的树

我需要使用Sortable.js在VueJS 2中构建拖放功能。我有这些条件：

我必须使用v形桌，不允许使用div

必须建立树和拖放功能使用平面结构如下

保证孩子会像下面那样跟随父母

现在，我看到了一些Sortable.js的工作示例/演示，发现它可以与下面的父/子结构一起工作，而不是平面结构

[
 {
   "id": "0001",
   ....
   "children": [
       {
         "id": "0003",
         ....
         "children": [
           {
             "id": "0004",
             ....
             "depth": 2
           },
           {
             "id": "0006",
             ....
             "depth": 2
           }
         ],
         "depth": 1
       },
       {
         "id": "0005",
         ....
         "depth": 1
       }
   ],
   "depth": 0
 },
 {
   "id": "0002",
   ....
   "depth": 0
 }
]

---

我尝试了很多方法，但都没有得到结果。有没有办法得到结果？我是否缺少一些文档来获得我想要的内容？

您是否在寻找一种方法来将您的平面json数组转换为可用于sortableJs的数组？

{id:7，parent:6，depth:1}

既然父数组是depth:1，那不是depth:2吗？是的@Bravo您是正确的。我更新了结构。@ridhesh不，我只想把它用于我的树。而且我的物品可以达到数千件甚至更多。因此，在UI中计算整个树以将其转换为sortable.js工作的结构将是一个坏主意。

[
 {
   "id": "0001",
   ....
   "children": [
       {
         "id": "0003",
         ....
         "children": [
           {
             "id": "0004",
             ....
             "depth": 2
           },
           {
             "id": "0006",
             ....
             "depth": 2
           }
         ],
         "depth": 1
       },
       {
         "id": "0005",
         ....
         "depth": 1
       }
   ],
   "depth": 0
 },
 {
   "id": "0002",
   ....
   "depth": 0
 }
]